Skip to content

07.shouldComponentUpdate实现

代码演化请观看视频,这里呈现相关代码:

js
// Component.js
class Updater {
    constructor(ClassComponentInstance){
        this.ClassComponentInstance = ClassComponentInstance
        this.pendingStates = []
    }
    addState(partialState){
        this.pendingStates.push(partialState)
        this.preHandleForUpdate()
    }
    preHandleForUpdate(){
        if(updaterQueue.isBatch){
            updaterQueue.updaters.add(this)
        }else{
            this.launchUpdate()
        }
    }
    launchUpdate(nextProps){////
        const { ClassComponentInstance, pendingStates } = this
        if(pendingStates.length === 0  && !nextProps) return///
        let isShouldUpdate = true;///
        let nextState = this.pendingStates.reduce((preState, newState) => {///
            return {
                ...preState, ...newState
            }
        }, this.ClassComponentInstance.state);
        
        if (ClassComponentInstance.shouldComponentUpdate && (!ClassComponentInstance.shouldComponentUpdate(nextProps, nextState))) {///
            isShouldUpdate = false;///
        }///
        this.pendingStates.length = 0
        if(nextProps) ClassComponentInstance.props = nextProps///
        ClassComponentInstance.state = nextState///
        if(isShouldUpdate) ClassComponentInstance.update()///
    }
}
js
// react-dom.js
function updateClassComponent(oldVNode, newVNode) {
    const classInstance = newVNode.classInstance = oldVNode.classInstance;
    classInstance.updater.launchUpdate(newVNode.props); ///
}

基于 VitePress 构建