React中的state Hook

state Hook是一个函数（useState），用于在函数组件中使用状态

useState

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

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

   • 当前状态的值
   • 改变状态的函数 一个函数组建中可以有多个状态，有利于横切关注点 useState 的原理

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

   • 不存在：

     • 使用默认值创建一个状态
     • 将该状态加入到状态数组中，下标为N

   • 存在：

     • 忽略掉默认值
     • 直接得到状态值

注意的细节

1. useState最好写到函数的起始位置，方便阅读
2. useState严禁出现在代码块（判断、循环）中
3. useState返回的函数（数组的第二项），引用不变
4. 如果使用函数改变数据，若数据和之前的的数据完全相等（Object.is比较），不会导致重新渲染
5. 使用函数改变数据，传入的值和原来的数据不会进行合并，而是直接替换
6. 如果要实现强制刷新组件

• 类组件：使用this.forceUpdate函数

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

  //函数组件
  const [,forceUpdate] = useState({});
  强制刷新
  return(
      <button onClick={()=>{
        forceUpdate({});
      }}>强制刷新</button>
  )
  

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

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

   setN(prev => {return prev + 2})
   //传入的函数，会在事件完成之后统一运行