自己使用react时候的一些亲身感受,大神略过.
react的state数据更新机制,
调用setState方法后
更新底层数据,对比数据哪些不同,然后根据数据生在相对应的虚拟DOM,最后生成真实的DOM树.
这是我不看文档能理解的,看了网上专业的介绍后:
ReactClass.prototype.setState = function(newState) {
//this._reactInternalInstance是ReactCompositeComponent的实例
this._reactInternalInstance.receiveComponent(null, newState);
}
源码来自网络
这里主要分三种情况,文本元素,基本元素,自定义元素。
我目前的项目这三种都有用到,算的上是全面吧.
在做数据对比的时候,还用了内部的一个算法:
之后就是渲染到页面上了!
想要更好的利用react的虚拟DOM,diff算法的优势,我们需要正确的优化、组织react页面。例如将一个页面render的ReactElement
节点分解成多个组件。在需要优化的组件手动添加 shouldComponentUpdate
来避免不需要的 re-render
。