React更新机制实现原理
2017-03-30 17:20:06 0 举报AI智能生成
React更新机制实现原理是通过虚拟DOM和diff算法来实现的。当组件的状态发生变化时，React会重新计算虚拟DOM树，然后通过diff算法找出新旧虚拟DOM树的差异，最后将差异应用到实际的DOM上，从而实现最小化地更新页面。这种机制可以提高性能，避免不必要的重绘和重排。
作者其他创作
大纲/内容
reactClass Instance
setState
执行this._reactInternalInstance.receiveComponent
_reactInternalInstance
React composite Component
_instance属性保存reactClass instance实例
receiveComponent
入口参数是newState
var state = $.extend(nulll, this._instance.state, newState)
_instance.state = state
shouldComponentUpdate
componentWillUpdate
重新执行_instance.render
得到新的reactElement
比较newReactElement和oldReactElement
更新节点或者重新渲染节点
更新
key和type不变
调用子节点的receiveComponent
入口参数是新的reactElement
ReactDOMComponent.prototype.receiveComponent
执行_instance.componentDidUpdate
重新渲染
instantiateComponent
newComponent.mount
管理挂载和更新
_renderedComponent: _instance.render后的ReactDOMComponent或者ReactCompositeComponent或者ReactTextComponent
0 条评论
下一页
