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