React Hook

一. 认识函数组件

class组件——功能全、东西多；麻烦
函数组件——功能弱、东西少；方便

函数组件：
1.状态——能变的、重新渲染
class √
fc × hook
2.this——当前实例
class √
fc ×
3.ref——引用
class √
fc × hook
4.方法
class √
fc × hook

---

hook：一套工具函数的集合——增强fc的功能
函数组件专用的

---

二. 认识hook

hook：一套工具函数的集合——增强fc的功能

hook!=函数组件

---

1.状态——useState
this.state
2.影响——useEffect
把操作推迟到渲染完成，操作的结果会在下次渲染体现
模拟一部分生存周期函数
3.引用——useRef/forwardRef
4.上下文——useContext
theme主题
5.数据——useReducer

---

三. state

useState(初始值) => [值, function set];

this.state={
x: ?
}

this.state.a=99; //×
this.setState({ //√
a: 99
});

this.setState

react的状态——在渲染的过程中，保持不变的；所有的修改存着，等到渲染完成之后一块改、并且触发重新渲染
性能——理论上会降低（极少），极大提升程序稳定性

---

StrictMode——严格模式
1.找到所有的依赖项
2.渲染

只存在于development模式，打包以后就没了

---

四. hook使用注意事项

hook注意事项：
1.hook只能用在函数组件中
class组件不行
普通函数也不行
函数组件内部的函数也不行

2.hook跟顺序有关
hook函数一定要放在函数组件的第一层——别放在if、for、while

五. hook 底层原理

hook过程
1.获取自身的值
2.如果有——不是第一次执行
直接返回已有的值
3.如果没有——是第一次执行
构建一个值
存起来
返回出去

hook工作原理——reducer的原理
hook1+action=>hook2

hook2+action=>hook3