简单手写实现React类组件的state批量更新

本文的目标是，手写实现React类组件的 state 批量更新。

TL;DR

• 拆分setState逻辑，每一个类组件绑定一个Updater实例，Updater专门处理state的逻辑，以及什么时候更新
• 增加pendingStates，这样state更新的时候，辅助批量更新
• 增加updateQueue来控制批量更新，这里用了观察者模式，订阅更新
• 处理事件逻辑，切片事件函数，执行前增加flag的开始，执行后开始更新和重置flag。

准备工作

先将index.js的点击事件略微修改

import React from './source/react';
import ReactDOM from './source/react-dom';
// import React from 'react';
// import ReactDOM from 'react-dom';

class Count extends React.Component {constructor(props) {super(props);this.state = { number: 1 };}handleClick = () => {this.setState({ number: this.state.number + 1 });// {number:1}console.log('第一次setState', this.state);this.setState({ number: this.state.number + 1
1
2
3
4
5