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); ///
}