Drcus | 王亚振

Drcus | 王亚振

随便写,记录点东西

React useState Hook 指南

发布于:  

使用 useState

  1. useState(initialValue)
  2. [state, setState] = useState(initialValue)
  3. setState(newState)
  4. setState(prev => next) 可以基于先前的状态来设置新的状态

延迟初始化 state

useState 可以接受一个函数

useState(function initialState() {})

initialState 函数只在初始化渲染的时候执行一次 ,以后的组件渲染中不会再执行。

当初始状态开销比较大的时候,延迟初始化很方便

闭包-状态过时问题

const handleClickAsync = () => {
    setTimeout(function delay() {
      setCount(count + 1);
    }, 3000);
  }

这个 count 就不是正确的值

ES9 新特性(ES2018)

  • Promise.finally()

    一个Promise调用链要么成功到达最后一个.then(),要么失败触发 .catch() 无论运行成功还是失败都会执行

  • Rest / Spread

    三个点(...) ES6 也有三个点操作不过仅限于数组,现在对象中也可以使用

ES10 新特性 (ES2019)

  • 新的基本类型 BigInt
  • 新增了Array的flat()方法和flatMap()方法

在ES10 之后 JS的基本类型将有 7种

七种基本数据类型,分别是: String、Number、Boolean、Null、Undefined、Symbol、BigInt

后话

ES 新特性项目中暂时可能用不上,但是学习有助于了解趋势,以及JS语言在慢慢的完善,越来越强大。

~^_^~ 一片小花园 ?

赏赐