React的useState

自React版本16.8起，函数组件被赋予了更多的功能，不再是仅能做简单的逻辑组件。添加了useXX系列的底层api勾子节点。让函数组件，类组件平分天下。

setState

• setState 是做什么的？

  • 类组件的状态更新函数, 会对组件的 state 对象安排一次更新

• setState 是同步 or 异步？

  • 在不同的执行上下文环境里，setState 的方式可能不同
    • 异步：多次更新state，将多次更新合并为一次
      • 在生命周期函数 和 合成函数
    • 同步：需要立即获取他更新的值
      • setTimeout
      • 原生事件
      • async函数

useState

• useState 是做什么的？

  • 为函数组件，提供可定义，修改的多组状态值

• useState 的语法是解构吗？

  • 代码示例

  function Demo (props) {
      const [count, setCount] = useState(0); // 是解构语法吗？
  }
  

  • 是解构，useState 函数执行之后，初始化默认值，返回一个数组。数组第一个为状态的值，第二个为更改状态的方法。

• useState 使用初始值创建状态，仅执行了一次，为什么？

  • useState 执行时，会查看状态的数据中，是否已存在数据
  • 若查询到当前数据状态引用，已经有下标0的数据存在，它就不会重新使用初始值生成数据

• useState 返回的第二个值，设置状态的函数，是同步 or 异步？

• useState 为什么不能写在判断和循环内？

  • hooks节点的存储方式为链表结构
  • useState 的状态执行，是按照固定的顺序的
  • 判断和循环，会导致它的顺序不定，需要读取 state 的操作，就会引发问题

• useState 的状态更改，一定会引起组件更新吗？

  • 使用更新数据的函数，会对更新的state数据做浅比较，若更新的数据为基础数据类型直接比较未变 或 为地址类型的，地址未变，那么组件就不会渲染

• useState 的更新函数，可以使用 async 吗？

  • 可以，需要包裹一层函数