React 性能优化

React 性能优化

• React组件性能优化

单一组件中

		 // 推荐在constructor中bind,只执行一次
 		 constructor(props) {
    		super(props)
    		this.state = {
   			 }
    		this.handleClick=this.handleClick.bind(this)
  		}
        <button onClick={this.handleClick}>btn1</button>
		还有一种ES7写法，定义方法时用箭头函数
		handle = ()=>{}

        // 每次render,都会触发bind
        <button onClick={this.handleClick.bind(this)}>btn2</button>
        // 每次render,都会新生成内存地址
        <button onClick={()=>this.handleClick}>btn3</button>

		// 组件赋值对象时，在render外定义变量接受
		// render中...data 慎用

组件嵌套
只是改变父组件中props和state,而子组件中props属性未改变，但子组件还是render 。提供了一个钩子函数 shouldComponentUpdata方法

// 子组件
shouldComponentUpdata(nextProps,nextState){
//浅比较，深比较较烦，判断对象  所以有了immutable.js
	if(nextProps.item == this.props.item){
		return false
	}
	return true
}
还有一种React.PureComponent

immutable.js

immutable.js
主要是Map 和 is

• Redux 性能优化

reselect.js
数据缓存