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

useState

用法

  • 函数有一个参数（不写就是undefined），这个参数的值表示状态的默认值。
  • 函数的返回值是一个数组，该数组一定包含两项
    • 第一项：当前状态的值
    • 第二项：改变状态的函数

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

原理

React Element会持有函数组件的引用，就是挂载到了type上，值为function
image.png

  1. 第N次调用useState
  2. 检查该节点的状态数组中是否存在下标N——源码中使用的是单向链表，要保证稳定的排序
  3. 若不存在
    1. 使用默认值创建一个状态
    2. 将该状态加入状态数组中，下标为N（有序）
  4. 若存在
    1. 忽略掉默认值
    2. 直接得到状态值

注意：

  1. useState最好写在函数组件的最上方，便于阅读
  2. 不论哪种Hook都严禁写到循环、判断中
  3. useState返回的函数，引用不变（节省内存）
  4. 如果使用函数改变数据，若数据和之前的数据完全相等（它是使用Object.is比较），不会导致重新渲染！以达到优化效率的目的。
  5. 如果使用函数改变数据，传入的值不会和原来的数据进行合并，而是直接替换（跟类组件的setState不同）
  6. 如果要强制刷新组件
    1. 类组件：使用 forceUpdate() ，会跳过shouldComponentUpdate
    2. 函数组件：可以使用 setState({}) ;就是里面传个空对象即可
  7. 如果某些状态之间没有必然的联系，应该分化为不同的状态，而不要合并为一个对象，降低耦合
  8. 和类组件的状态一样，函数组件中改变可能是异步的（在DOM事件 中），此时多个状态变化会合并，以提高效率，此时，不能信任之前的状态，而应该是用回调函数的方式改变状态。 如果状态变化要使用到之前的状态，尽量传递函数作为setState的参数。