深度理解React底层实现原理
1、当我们更新状态的时候， React 会重新渲染组件。每一次渲染都能拿到独立的 count 状态，这个状态值是函数中的一个常量。它仅仅只是在渲染输出中插入了 count 这个数字。这个数字由 Reac t提供。
2、当数据发生变化时，React会创建一个新的Virtual DOM树。 React会将新旧两个Virtual DOM树进行比较，并找出两者之间的差异。React使用Diff算法来进行比较，该算法能够高效地找出不同之处。
3、在一定程度上，React Native和NodeJS有异曲同工之妙。
4、以render()函数为分界线。从顶层组件开始，一直往下，直至最底层子组件。然后再往上。组件update阶段同理。——— 前面是react16以前的组建渲染方式。
5、每个 react 组件的顶部都要导入 React，因为 JSX 实际上依赖 Babel（@babel/preset-react）来对语法进行转换，最终生成 React.createElemnt 的嵌套语法。下方能够直观的看到 JSX 转换后的渲染结果。
React的diff算法详解
React实现远比这个要复杂，特别是在React 16之后还引入了Fiber架构，但是主要的思想是一致的。
react 通过 diff 算法来进行性能优化，减少 dom 的创建和删除。那么 react 采用的优化是否为 最优化 呢？答案是：否。
diff算法是虚拟DOM中采用的算法。把树形结构按照层级分解，只比较同级元素。不同层级的节点只有创建和删除操作。给列表结构的每个单元添加唯一的key属性，方便比较。相关信息：React只会匹配相同class的component。
diff算法 传统diff 算法其时间复杂度最优解是 O(n^3)，那么如果有 1000 个节点，则一次 diff 就将进行 10 亿次比较，这显然无法达到高性能的要求。
如果子组件的 shouldComponentUpdate 返回 true ，则调用 componentWillUpdate render ，然后 通过diff算法更新DOM ，最后调用 componentDidUpdate 。
react渲染原理分析
React 渲染界面的方式在 React 等大型前端框架出现之前，我们渲染 UI 元素的方式是使用字符串模板。而在 React 中，我们通过使用JavaScript 对象来渲染 UI 元素。
它仅仅只是在渲染输出中插入了 count 这个数字。这个数字由 Reac t提供。当 setCount 的时候， React 会带着一个不同的 count 值再次调用组件。然后， React 会更新 DOM 以保持和渲染输出一致。
Vue和react的虚拟DOM的原理和步骤是完全一致的。