关于render渲染优化

Posted 2023-05-08

参考技术A 除初始化组件渲染外，组件会在以下两种情况下发生重渲染：

1、当调用setState()函数时，组件会发生重渲染，即使组件的state未发生改变；

2、当父组件发生重渲染时，其全部子组件都会重渲染。

虽然React的重渲染机制是严谨的，但是也是非常耗时的，我们有两种方式来阻止组件不必要的重渲染。

shouldComponentUpdate(nextProps,nextState )是重渲染时render函数调用之前被调用的函数，它接收两个参数：nextProps和nextState，分别表示下一个props和下一个state的值，并且，当函数返回false时，阻止接下来的render()函数的调用，阻止组件重渲染，而返回true时，组件照常重渲染，React默认返回true。

PureComponet原理：只需要把组件的继承类从Component换成PureComponent即可。PureComponent 自动加载了shouldComponentUpdate 函数，当组件更新时，shouldComponentUpdate 对props和state进行了一层浅比较，如果组件的props和state都没有发生改变，render方法就不会触发，省去Virtual DOM的生成和对比过程，达到提升性能的目的。

但是由于PureComponent对props和state只进行了浅比较，所以对与嵌套的对象并不适用。

vue页面的渲染过程

参考技术A 我们从最简单的new Vue开始：

1、new Vue，执行初始化
2、挂载$mount方法，通过自定义Render方法、template、el等生成Render函数
3、通过Watcher监听数据的变化
4、当数据发生变化时，Render函数执行生成VNode对象
5、通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素
至此，整个new Vue的渲染过程完毕。

1、把模板编译为render函数
2、实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom
3、对比虚拟dom，渲染到真实dom
4、组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟dom, 返回到步骤3

详见链接： https://segmentfault.com/a/1190000018495383