众所周知,react中props和state值的变化都会导致组件重新渲染。使用shouldComponentUpdate是为了减少不必要的render渲染。本文重点回答以下问题:1:如何使用shouldComponentUpdate进行内存优化;shouldComponentUpdate(nexrProps){if(this.props.num===nexrProps.num){returnfalse}returntrue;}这种方式相信大家都知道,shouldComponentUpdate提供了两个参数nextProps和nextState,表示nextprops的值和状态。当函数返回false时,render()方法不会被执行,组件也不会被渲染。当返回true时,组件将照常重新渲染。此方法是将当前道具中的值与下一个道具中的值进行比较。当数据相等时返回false,否则返回true。但是这种方法在面对复杂的对象时就没有效果了。比如props长成这样,就没法处理了,因为在js中,object、array、function都是引用类型。即使他们里面的数据发生了变化,他们指向的还是同一个内存地址,所以上面的判断是行不通的。obj:{age:12,name:'xioabbao',student:{count:1}}2:有3种解决方法:(1)在使用setState改变数据之前,先用es6中的assgin进行copy,但assginonlydeepcopy第一层数据,所以不是最完美的方案。consto2=Object.assign({},this.state.obj)o2.student.count='00000';this.setState({obj:o2,})(2)使用JSON.parse(JSON.stringfy())进行深拷贝,但是当dataundefined遇到函数时会报错。consto2=JSON.parse(JSON.stringify(this.state.obj))o2.student.count='00000';this.setState({obj:o2,})(3)使用immutable.js构建项目。Immutable关注数据的不可变性。每次对数据进行操作,都会自动深拷贝数据。项目中的数据采用了immutable的方式,可以很轻松的解决问题,但是需要学习另外一套API。此文暂时属于个人观点,希望大家多多指教。
