渲染优化,避免重复渲染
- 当state和props的改变会造成页面重新渲染。
- props组件diff算法只是计算出发生改变的数据找到虚拟dom,但还是全部重新渲染。
如何解决
- 使用shouldComponentUpdate。
- shouldComponentUpdate函数是函数要渲染前要执行的函数,函数返回false时不渲染,反之渲染。
- 函数接受两个参数,参数一:nextProps,参数二:nextState。
如何使用
-
函数组件中
-
// shouldComponentUpdate 渲染前触发,返回true则渲染,返回false不渲染,避免重复渲染 shouldComponentUpdate = (nextProps, nextState) =>{ /* eslint-disable */ if( !this.props.pageComponent && (JSON.stringify(this.state) === JSON.stringify(nextState)) && (JSON.stringify(this.props) === JSON.stringify(nextProps))){ return false } return true; /* eslint-enable */ }
-
函数组件中
-
// react。memo来控制,参数一:组件,参数二:相当于shouldComponentUpdate函数 function RefreshComponent (prevProps, nextProps){ if(JSON.stringify(prevProps) === JSON.stringify(nextProps)){ return true; } return false; } export default React.memo((Form.create())(AddNewAsset),RefreshComponent) ;
相关插件使用
-
PureRenderMixin(不必要的情况下让函数 shouldComponentUpdate 返回 false, 使用这个插件就能够减少不必要的重新渲染,得到一定程度上的性能提升)
-
import React from 'react'; import { immutableRenderDecorator } from 'react-immutable-render-mixin'; @immutableRenderDecorator class Test extends React.Component { render() { return <div></div>; } }