React剖析之状态管理

setState是同步更新还是异步更新?

  • setState 并非真异步,只是看上去像异步。在源码中,通过 isBatchingUpdates 来判断
    setState 是先存进 state 队列还是直接更新,如果值为 true 则执行异步操作,为 false 则直接更新。

  • 那么什么情况下 isBatchingUpdates 会为 true 呢?在 React 可以控制的地方,就为 true,比如在 React 生命周期事件和合成事件中,都会走合并操作,延迟更新的策略。

  • 但在 React 无法控制的地方,比如原生事件,具体就是在 addEventListener 、setTimeout、setInterval 等事件中,就只能同步更新。

  • 一般认为,做异步设计是为了性能优化、减少渲染次数,React 团队还补充了两点。

    1,保持内部一致性。如果将 state 改为同步更新,那尽管 state 的更新是同步的,但是 props不是。

    2,启用并发更新,完成异步渲染。

class Test extends React.Component {
  state  = {
      count: 0
  };

    componentDidMount() {
    this.setState({count: this.state.count + 1}); // 异步
    console.log(this.state.count);

    this.setState({count: this.state.count + 1}); // 异步
    console.log(this.state.count);

    setTimeout(() => {   // 同步
      this.setState({count: this.state.count + 1});
      console.log(this.state.count);

      this.setState({count: this.state.count + 1});
      console.log(this.state.count);
    }, 0);
  }
 
  render() {
    return null;
  }
};

输出:0,0,2,3

如何面向组件跨层级通信?

![image-20220527102932298](/Users/admin/Library/Application Support/typora-user-images/image-20220527102932298.png)

React状态管理框架有哪些?

  • Flux
  • Redux
  • mobx

Flux

Redux

posted @ 2022-05-27 14:09  小蜗蜗蜗牛^o^  阅读(99)  评论(0编辑  收藏  举报