State HOOK

State HOOK 是一个在函数组件中使用的函数（useState），用于在函数组件中使用状态

useState函数

1. 参数：useState函数有一个参数，这个参数的值表示状态的默认值

2. 返回值：useState函数的返回值是一个数组，该数组一定包含两项

   第一项：当前状态的值

   第二项：改变状态的函数

一个函数组件可以有多个状态，这种做法非常有利于横向切分关注点

实例

State HOOK原理

对于一个函数组件在创建时，会同时创建一个 状态表格（类似于注册表），如下图（以上述代码为例）

状态表格仅会依赖创建它的函数组件，组件卸载表格才会销毁

具体流程

函数组件每次重新渲染，都会重新运行函数组件指向的函数

1. 第N次调用useState，检查该节点的状态数组是否存在下标N

2. 两种情况

   1. 存在

      忽略 useState() 参数的默认值，直接得到状态值

   2. 不存在

      使用 useState() 参数的默认值创建一个状态，将该状态加入到状态表格中，下标为N

useState使用细节

1. useState 最好写到函数的起始位置，便于阅读

2. useState 严禁出现在代码块 （判断、循环）中

   ==在判断、循环中会导致状态表格的索引顺序混乱，读取顺序混乱==

3. useState 返回的函数（数组的第二项）完全相同，引用不变（节约内存空间）

4. 相同数据不渲染：使用函数改变数据，如果数据和之前的数据完全相等（使用Object.is比较），不会导致重新渲染，以达到了优化效率的目的。

   在类组件（继承自 React.Component的类组件）中，如果调用this.setState({})，会导致组件重新运行render

5. 使用函数改变数据，传入的值不会和原来的数据进行合并，而是直接替换。

   类组件的状态更新采用合并方式

   当然，如果useState的状态值密不可分，还想要对对象中某一个数据进行更新，可以使用扩展运算符

6. 如果要实现强制刷新组件

   1. 类组件：使用forceUpdate函数

   2. 函数组件：使用一个空对象的useState

   

7. 如果某些状态之间没有必然的联系，应该在函数组件中分化为不同的状态，而不要合并成一个对象

8. 可能异步的状态改变：和类组件的状态一样，函数组件中状态的改变可能是异步的（DOM事件中），多个状态变化会合并以便提高效率，因此，不能信任之前赋值的状态，而应该使用回调函数的方式改变状态。

   与类组件改变状态方式类似，State HOOK的useState函数也可以传递一个函数 ，通过返回值改变状态

   函数参数：之前的状态值

   函数返回值：新的状态