黑豆的博客

在不同的 React 模式下，State 的更新流程是不同的。在 React 18 中，可能会采用 concurrent 模式，会采用不同的 State 更新逻辑，这里我们先介绍 legacy 模式下的 State。

# 类中的 State

语法：

setState(obj, callback);

当第一个参数传入的是一个对象的时候，这个对象就是合并的 state ; 如果是一个函数，需要将当前的 state 和 props 作为参数传进去，并返回一个新的 state ;

第二个参数是一个回调函数，可以立即获取最新的 state 。

this.setState({
  count: 1
}, () => {
  console.log(this.state);
})
this.setState(function(state, props) {
  return {
    count: 1
  }
})

state 的更新流程：

触发 setState -> 计算 expirationTime -> 更新调度，调和 fiber 树 -> 合并 state，执行 render -> （commit阶段）替换真实 DOM -> 执行 callback 函数

在实际开发中，频繁的更新 state 对性能很不好，我们可以通过 pureComponent 、shouldComponentUpdate 进行优化。

# setState的基本用法

# setState的更新流程

# setState 原理

# 怎么实现批量更新的

异步环境开启批量更新方法：unstable_batchedUpdates

示例：

提高更新优先级别 flushSync 函数可以将回调函数中的更新任务，放到一个较高的优先级中。

useState的用法

← props →