目录
[1. 受控表单绑定](#1. 受控表单绑定)
[2. React中获取DOM](#2. React中获取DOM)
[3. 案例：B站评论 --- 发表评论](#3. 案例：B站评论 — 发表评论)
[3.1 B站评论案例 ------ 核心功能实现](#3.1 B站评论案例 —— 核心功能实现)
[3.2 B站评论案例 --- id处理和时间处理](#3.2 B站评论案例 — id处理和时间处理)
[3.3 B站评论案例 --- 清空内容并重新聚焦](#3.3 B站评论案例 — 清空内容并重新聚焦)
[4. 组件通信](#4. 组件通信)
[4.1 理解组件通信](#4.1 理解组件通信)
[4.2 父传子-基础实现](#4.2 父传子-基础实现)
[4.3 父传子-props说明](#4.3 父传子-props说明)
[4.4 父传子 - 特殊的prop children](#4.4 父传子 - 特殊的prop children)
[4.5 父子组件通信-子传父](#4.5 父子组件通信-子传父)
[4.6 使用状态提升实现兄弟组件通信](#4.6 使用状态提升实现兄弟组件通信)
[4.7 使用Context机制跨层级组件通信](#4.7 使用Context机制跨层级组件通信)
[5. useEffect 的使用](#5. useEffect 的使用)
[5.1 useEffect 的概念理解](#5.1 useEffect 的概念理解)
[5.2 useEffect 的基础使用](#5.2 useEffect 的基础使用)
[5.3 useEffect 依赖项参数说明](#5.3 useEffect 依赖项参数说明)
[5.4 useEffect --- 清除副作用](#5.4 useEffect — 清除副作用)
[6. 自定义Hook实现](#6. 自定义Hook实现)
[7. React Hooks使用规则](#7. React Hooks使用规则)
[8. 案例：优化B站评论案例](#8. 案例：优化B站评论案例)
[8.1 优化需求](#8.1 优化需求)
[8.2 优化需求-通过接口获取评论列表](#8.2 优化需求-通过接口获取评论列表)
[8.3 优化需求-封装评论项Item组件](#8.3 优化需求-封装评论项Item组件)
1. 受控表单绑定
概念：
- 使用React组件的状态（useState）控制表单的状态
① 准备一个React状态值
② 通过value属性绑定状态，通过onChange属性绑定状态同步的函数
- 案例：
2. React中获取DOM
在 React 组件中获取/操作 DOM，需要使用 useRef React Hook钩子函数，分为两步：
① 使用useRef创建 ref 对象，并与 JSX 绑定
② 在DOM可用时，通过 inputRef.current 拿到 DOM 对象
- 案例：
3. 案例：B站评论 --- 发表评论
3.1 B站评论案例 ------ 核心功能实现
① 获取评论内容
② 点击发布按钮发布评论
3.2 B站评论案例 --- id处理和时间处理
① rpid要求一个唯一的随机数id - uuid
② ctime要求以当前时间为标准，生成固定格式 - dayjs
3.3 B站评论案例 --- 清空内容并重新聚焦
① 清空内容 - 把控制input框的value状态设置为空串
② 重新聚焦 - 拿到input的dom元素，调用focus方法
4. 组件通信
4.1 理解组件通信
概念：
- 组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信方法
- A-B 父子通信
- B-C 兄弟通信
- A-E 跨层通信
4.2 父传子-基础实现
实现步骤
① 父组件传递数据 - 在子组件标签上 绑定属性
② 子组件接收数据 - 子组件通过 props参数 接收数据
4.3 父传子-props说明
① props可传递任意的数据
- 数字、字符串、布尔值、数组、对象、函数、JSX
② props是只读对象
- 子组件只能读取props中的数据，不能直接进行修改, 父组件的数据只能由父组件修改
4.4 父传子 - 特殊的prop children
场景：
- 当我们把内容嵌套在子组件标签中时，父组件会自动在名为children的prop属性中接收该内容
4.5 父子组件通信-子传父
核心思路：
- 在子组件中调用父组件中的函数并传递参数
父组件：
子组件：
- props 是一个对象，相当于 { onGetSonMsg: getMsg }
简写形式：
父组件：
子组件：
- 解构形参 props
4.6 使用状态提升实现兄弟组件通信
实现思路：
- 借助"状态提升"机制，通过父组件进行兄弟组件之间的数据传递
① A组件先通过子传父的方式把数据传给父组件App
② App拿到数据后通过父传子的方式再传递给B组件
4.7 使用Context机制跨层级组件通信
实现步骤：
① 使用createContext方法创建一个上下文对象 Ctx，当做组件使用
② 在顶层组件（App）中通过 Ctx.Provider 组件的 value 属性 提供数据
③ 在底层组件（B）中通过 useContext 钩子函数接收 Ctx 上下文对象，获取消费数据
使用Context机制跨层级组件通信使用说明：
- 顶层组件和底层组件都是相对的
5. useEffect 的使用
5.1 useEffect 的概念理解
useEffect是一个React Hook函数，用于在React组件中 创建不是由事件引起而是 由渲染本身引起的操作（副作用）, 比如发送AJAX请求，更改DOM等等
说明：
- 上面的组件中没有发生任何的用户事件，组件渲染完毕之后就需要和服务器要数据，整个过程属于"只由渲染引起的操作"
5.2 useEffect 的基础使用
需求：
- 在组件渲染完毕之后，立刻从服务端获取频道列表数据并显示到页面中
语法：
- 参数1是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作
- 参数2是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数函数的执行，当是一个空数组的时候，副作用函数只会在组件渲染完毕之后执行一次
5.3 useEffect 依赖项参数说明
useEffect副作用函数的执行时机存在多种情况，根据 传入依赖项的不同 ，会有不同的执行表现
① 没有依赖项。 初始执行一次，组件更新就会执行。也就是 useEffect 的第二个参数为空的情况。
- 初始化执行一次
- 只要点击按钮后，组件更新就会执行
② 依赖项为空数组 []，只会执行一次。 组件初始执行一次。
③ 传入特定的依赖项。 初始执行一次，依赖项变化就会执行
- 也就是 useEffect 的第二个参数依赖某个特定参数
- 初始化执行一次
- 只有 count 的值变化的时候才会执行
5.4 useEffect --- 清除副作用
在useEffect 中编写的 由渲染本身引起的对接组件外部的操作， 社区也经常把它叫做 副作用操作 ，比如在useEffect中开 启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用。
说明：
- 清除副作用的函数最常见的执行时机是在组件卸载时自动执行
需求：
- 在Son组件渲染时开启一个定制器，卸载时清除这个定时器
6. 自定义Hook实现
概念：
- 自定义Hook是以 use 打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用
案列：
-
点击按钮控制元素的显示与隐藏
-
问题：
- 布尔切换的逻辑，与当前组件耦合在一起，不方便复用
解决思路自定义 hook
封装自定义 hook 的通用思路：
- ① 声明一个以 use 开头的函数
- ② 在函数体内封装可复用的逻辑（只要是可复用的逻辑）
- ③ 把组件中用到的状态或者回调函数 return 出去（以对象或者数组的形式）
- ④ 在哪个组件中要用到这个逻辑，就执行这个函数，解构出状态和回调函数进行使用
7. React Hooks使用规则
使用规则
- 只能在组件中或者其他自定义Hook函数中调用
- 只能在组件的顶层调用，不能嵌套在 if、for、其他函数中
8. 案例：优化B站评论案例
8.1 优化需求
- 使用请求接口的方式获取评论列表并渲染
- 使用自定义Hook函数封装数据请求的逻辑
- 把评论中的每一项抽象成一个独立的组件实现渲染
8.2 优化需求-通过接口获取评论列表
① 使用 json-server 工具模拟接口服务, 通过 axios 发送接口请求
- json-server是一个快速以.json文件作为数据源模拟接口服务的工具
- axios是一个广泛使用的前端请求库
步骤：
- 安装 json-server 和 axios
- 将评论列表数据转化为 json 字符串，在项目下新建一个 db.json 的文件，将评论列表数据 json 字符串，拷贝到里面。
- 在 package.json 里的 scripts 节点下配置启动选项，注意端口号 port 不要与项目启动的端口相冲突。
- 使用命令 npm run serve 启动 json-server 服务器
- 不要关闭 json-server 服务器，在新的命令窗口启动项目（npm start）
- http://localhost:3005/defaultList 就是我们请求的 url
② 使用 useEffect 调用接口获取数据
③ 在 App 根组件里调用
8.3 优化需求-封装评论项Item组件
抽象原则：
- App作为"智能组件"负责数据的获取，Item作为"UI组件"负责数据的渲染
