react总结之避免不必要的重复渲染

类组件PureComponent

适当的使用PureComponent创建组件可以提高性能,在使用类组件的时侯,继承PureComponent组件,它是依赖于传递给组件的props进行浅比较,当props发生改变的时候,才会重新渲染组件,既然是浅比较,那么在state和props每次都发生改变的额时候,还要使用PureComponent就会对性能产生负面的影响了!

React.memo()

React.memo()和PureComponent很相似,PureComponent是一个类,React.memo()是一个函数组件,它有两个参数,第一个参数是纯函数的组件,第二个参数是true或者false,用于控制是否刷新组件!

shouldComponmentUpdate

类组件的的生命周期函数,当返回值是false的时候,视图不做更新,否则更新!

使用插件seamless-immutable

1.引入import Immutable from 'seamless-immutable';
2.初始化state
	this.state = {
					list: Immutable([]);
	}
3.修改state
	this.setState({
				list: Immutable(items);
	})

使用插件pure-render-decorator

import React from 'react';
import pureRender from 'pure-render-decorator';
// es7才支持装饰器,这边需要配置babel
@pureRender
class List extends React.Component {
  render() {
    const {list} = this.props;
    return (
      <>
        {
          list.map((item) => {
            return (
              <div key={item.id}>
                <div>{item.code}</div>
              </div>
            );
          })
        }
      </>
    );
  }
}
export default List;