DaMeng

react setState 原理

发表于 更新于 分类于 ，

1 使用方法

1
setState(stateChange[, callback])

  • stateChange

    • stateChange 可以为对象 或 函数

      1
      2
      3
      4
      5
      6
      this.setState((state, props) => {
      //参数 state 和 props 都为最新的，返回值会与 state 进行浅合并
      	return {counter: state.counter + props.step};
      });

      this.setState({quantity: 2}) //对象参数会浅拷贝到新的 state 中

  • callback

    • callback 为可选的回调函数，它将在 setState 完成合并并重新渲染组件后执行。通常，我们建议使用 componentDidUpdate() 来代替此方式

2 原理

  • setState 内部会将 state 的更改添加到队列，通过批量更新来提高性能。

  • 如果是由 React 引发的事件处理（比如通过 onClick 引发的事件处理），调用 setState 不会同步更新this.state，除此之外的setState调用会同步执行 this.state。所谓“除此之外”，指的是绕过 React 直接添加 JS 原生的事件处理函数，如 addEventListener、setTimeout、setInterval 等产生的调用

  • setState 总是会触发组件重新渲染（除非 shouldComponentUpdate 返回 false）。

3 注意

  • 构造函数是唯一可以给 this.state 直接赋值的地方，其他地方都通过使用 setState 来修改state。

  • react 会将多个 setState 调用合并为一个，故不要直接使用 state 来更新下一个值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // Wrong
    this.setState({
      counter: this.state.counter + this.props.increment,
    });

    // Correct
    this.setState((state, props) => ({
      counter: state.counter + props.increment
    }));