在上一节的基础上修改代码。

前置知识：

react基础篇第五点：https://www.yuque.com/linhe-8mnf5/fxyxkm/tnkpyg#jBiGv
原理篇：https://www.yuque.com/linhe-8mnf5/fxyxkm/daa695

  • 在react中事件是异步的，事件更新是批量的。
  • 调用setState并没有立马更新，而是先缓存起来，等事件函数完成后在进行批量更新，一次更新并重新渲染。


1、改造index.js，先手动实现批量更新

  1. // index.js 
  2.   handleClick = () => {
  3.     updateQueue.isBatchingUpdate = true
  4.     this.setState({
  5.       number: this.state.number + 1
  6.     })
  7.     console.log(this.state.number)
  8.     setTimeout(() => {
  9.       this.setState({
  10.         number: this.state.number + 1
  11.       })
  12.       console.log(this.state.number)
  13.     }, 0)
  14.     updateQueue.batchUpdate()
  15.   }

2、改造Component.js

  1. // Component.js
  2. import { createDom } from './react-dom'
  4. // 更新队列
  5. export const updateQueue = {
  6.   isBatchingUpdate: false, // 当前是否处于批量更新模式，默认值false
  7.   updaters: new Set(), // 传入的setState集合
  8.   // 批量更新方法
  9.   batchUpdate() {
  10.     for (let updater of this.updaters) {
  11.       updater.updateClassComponent()
  12.     }
  13.     this.isBatchingUpdate = false
  14.   }
  15. }
  17. class Updater {
  18.   constructor(classInstance) {
  19.     this.classInstance = classInstance // 类组件实例
  20.     this.penddingStates = [] // 等待生效的状态
  21.     this.callbacks = []
  22.   }
  23.   addState(partialState, callback) {
  24.     this.penddingStates.push(partialState) // 等待生效的状态
  25.     if (typeof callback === 'function') {
  26.       this.callbacks.push(callback)  // 更新后的回调
  27.     }
  28.     // 如果当前是批量更新模式，先缓存
  29.     if (updateQueue.isBatchingUpdate) {
  30.       updateQueue.updaters.add(this)
  31.     } else {
  32.       // 直接更新组件
  33.       this.updateClassComponent()
  34.     }
  35.   }
  36.   updateClassComponent() {
  37.     const { penddingStates, classInstance, callbacks } = this
  38.     // 说明有setState
  39.     if (penddingStates.length > 0) {
  40.       classInstance.state = this.getState() // 计算新状态
  41.       // 更新dom
  42.       classInstance.forceUpdate()
  43.       // 调用setState回调
  44.       callbacks.forEach(callback => callback())
  45.       // 清空callback
  46.       callbacks.length = 0
  47.     }
  48.   }
  49.   getState() {
  50.     let { penddingStates, classInstance } = this
  51.     let { state } = classInstance
  52.     // 老状态新状态合并
  53.     penddingStates.forEach(nextState => {
  54.       // setState传值为函数，要传入老状态，返回新状态，在进行合并
  55.       if (typeof nextState === 'function') {
  56.         nextState = nextState(false)
  57.       }
  58.       // 合并状态，新状态覆盖老状态
  59.       state = { ...state, ...nextState }
  60.     })
  61.     // 清空等待生效的状态
  62.     penddingStates.length = 0
  63.     return state
  64.   }
  65. }
  66. // 被继承的父类Component
  67. class Component {
  68.   static isReactComponent = true
  69.   constructor(props) {
  70.     this.props = props
  71.     this.state = {}
  72.     this.Updater = new Updater(this)
  73.   }
  74.     // 被调用的this.setState()方法
  75.   setState(partialState, callback) {
  76.     this.Updater.addState(partialState, callback)
  77.   }
  78.   forceUpdate() {
  79.     let newVdom = this.render() //获取新dom
  80.     updateClassComponent(this, newVdom) // 更新
  81.   }
  82. }
  84. // 更新类组件
  85. function updateClassComponent(classInstance, newVdom) {
  86.   const oldDom = classInstance.dom // 取出类组件上次渲染出来的真实dom
  87.   // 创建新的DOM
  88.   const newDom = createDom(newVdom)
  89.   // 新的替换老的
  90.   oldDom.parentNode.replaceChild(newDom, oldDom)
  91.   classInstance.dom = newDom
  92. }
  94. export default Component

3、实现效果

image.png

4、源代码

本文地址：https://gitee.com/linhexs/react-write/tree/4.update-queue/