React由Meta公司开发，是一个用于构建Web和原生交互界面的库
相较于传统基于DOM开发的优势
1.组件化的开发方式
2.不错的性能
相较于其他前端框架的优势
1.丰富的生态
2.跨平台支持
全球最流行，大厂必备
create-react-app是一个快速创建React开发环境的工具，底层由Webpack构件，封装了配置细节，开箱即用执行命令：
创建项目更多方式：
https://zh-hans.react.dev/learn/start-a-new-react-project
JSX是JavaScript和XML(HTML)的缩写，表示在JS代码中编写HTML模板结构，是React构建UI的方式
JSX并不是标准的JS语法，它是 JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中使用
在JSX中可以通过 识别JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等
使用引号传递字符串、JS变量、函数调用和方法调用、对象
注意：不能使用条件语句
在React中，可以通过逻辑与运算&&、三元表达式(?:)实现基础的条件渲染
需求：列表中需要根据文章的状态适配
React中的事件绑定，通过语法on + 事件名称 = {事件处理程序}。整体上遵循驼峰命名
在事件回调函数中设置形参e即可
语法：事件绑定的位置改造成箭头函数的写法，再执行clickHandler实际处理业务函数的时候传递实参
注意：不能直接写函数调用，这里事件绑定需要一个函数引用
语法：在事件绑定位置传递事件实参e的自定义参数，clickHandle中声明形参，注意顺序对应
概念：一个组件就是一个用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以服用多次
在React中，一个组件就是首字母大写的函数，内部存放了组件的逻辑和视图UI，渲染增加只需要把组件当作标签书写即可
useState是一个React Hook（函数），它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果和普通的JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着发生变化（数据驱动试图）
在React中状态被认为是只读的，我们应该始终替换它而不是修改它，直接修改状态不能引发视图更新
对于对象类型的状态变量，应该始终给set方法一个全新的对象来进行修改
React组件基础的样式控制有两种方式，行内样式和class类名控制
index.css
App.js
- 渲染评论列表
- 删除评论实现
- 渲染导航Tab和高亮实现
- 评论列表排序功能实现
App.js
App.scss
8.2.1列表渲染
8.2.2 删除评论
8.3.2渲染导航Tab和高亮显示
8.3.4评论列表排序
安装lodash库
8.3.5 样式书写优化
概念：使用React组件的状态（useState）控制表单状态
概念：通过DOM的方式获取表单的输入数据
1.输入评论内容，并发布评论
1）进行表单受控绑定
2）点击“发布”触发发布评论
3）非受控绑定输入框
4）光标聚焦
2.id处理和时间处理（uuid和day.js）
具体代码实现
概念：组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信手段和方法
- A-B 父子通信
- B-C 兄弟通信
- A-E 跨层通信
11.1.1 基础实现
实现步骤：
1.父组件传递数据-在子组件标签上绑定属性
2.子组件接收数据-子组件通过props参数接受数据
11.1.2props说明
props可以传递任意的合法数据，比如数字、字符串、布尔值、数组、对象、函数、JSX
props是只读对象
子组件只能读取props中的数据，不能直接进行修改，父组件的数据只能由父组件修改
11.1.3特殊的prop-chilren
场景：当我们把内容嵌套在组件的标签内部时，组件会自动在名为children的prop属性中接受该内容
核心思想：子组件中调用父组件中的参数并传递函数
实现思路：
借助状态提升机制，通过共同的父组件进行相抵之间的数据传递
实现步骤：
1.使用createContext方法创建一个上下文对象Ctx
2.在顶层组件{App}中通过Ctx.Provider组件提供数据
3.在底层组件{B}中通过useContext钩子函数获取消费消息
useEffect是一个React Hook函数，用于在React组件中创建不是由时间引起而是由渲染本身引起的操作（副作用），比如发送AJAX请求，更改DOM等等
说明：上面的组件中没有发生任何的用户事件，组件渲染完毕之后就需要跟服务器要数据，整个过程属于“只渲染引起的操作”
需求：在组建渲染完毕之后，立刻从服务器端获取数据并展示在页面中
说明：
- 参数1是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作
- 参数2是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数函数的执行，当是一个空数组的时候，副作用函数只会在组件渲染完毕之后执行一次
接口地址：http://geek.itheima.net/v1_0/channels
1）安装axios
2）发送请求
3）展示数据
useEffect副作用函数执行时机存在多种情况，根据传入依赖项的不同，会有不同的执行表现
概念：在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用函数，比如在useEffect中开启一个定时器，在组件卸载时把这个定时器清除掉，这个过程就是清楚副作用。
说明：清除副作用函数最常见的执行时机是在组件卸载时自动执行
概念：自定义Hook是以use大头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用
封装自定义hook通用思路：
1.声明一个以use打头的函数
2.在函数体内封装可复用的逻辑（只要是可复用的逻辑）
3.把组件中用到的状态或者回调return出去（以对象或者数组）
4.在哪个组件中要用这个逻辑，就执行这个函数，结构出来状态和回调进行使用
1.只能在组件或者其他自定义Hook函数中调用
2.只能在组件的顶层调用，不能嵌套在if、for、其它函数中
1）使用json-server工具模拟接口服务，通过axios发送请求
下载json-server到当前项目
在项目文件夹下创建db.json文件
在package.json下添加启动命令
2）使用useEffect调用接口获取数据
封装Hook调用接口函数
调用Hook函数
1）封装组件
2）调用组件
到此这篇react从入门到精通（react基础入门）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/56544.html