本文的目标是,手写实现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