React渲染流程，更新机制，性能优化

React渲染流程

jsx->虚拟DOM->真实DOM

jsx --> createElement函数 --> 这个函数帮助我们创建ReactElement对象(对象树) --> ReactDOM.render函数 --> 映射到浏览器的真实DOM

React更新流程

props/state改变 -> render函数重新执行 -> 产生新的DOM树(虚拟DOM) -> 新旧DOM树进行diff -> 计算出差异进行更新 -> 更新到真实的DOM

React需要基于这两棵树之间的差别来判断如何有效的更新UI;
如果一棵树参考另一颗树进行完全比较更新，那么即使是最先进的算法，该算法复杂度是O(n^3)，其中n是树中元素的数量；
React进行了优化，时间复杂度是O(n)；

如何优化呢?
同层节点之间相互比较，不会跨节点比较；
不同类型的节点，产生不同的树结构；
开发中可以通过key来指定哪些节点在不同的渲染下保持稳定；

对比不同类型的元素

当节点为不同的元素，React会拆卸原有的树，并且建立起新的树
当一个元素从a变成img，从button变成div，都会触发一个完整的重建流程；
当卸载一棵树时，对应的DOM节点也会被销毁，组件将执行componentWillUnmount()方法；
当建立一颗新的树时，对应的DOM节点