React的useState

192 阅读2分钟

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 吗?

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