大家好，我是讯享网，很高兴认识大家。



 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> 

讯享网

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

讯享网

1. 渲染评论列表
2. 删除评论实现
3. 渲染导航Tab和高亮实现
4. 评论列表排序功能实现

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）

具体代码实现

讯享网

概念：组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信手段和方法

1. A-B 父子通信
2. B-C 兄弟通信
3. 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. 参数1是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作
2. 参数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）调用组件