一文掌握React性能优化
1 shouldeComponentUpdate
shouldComponentUpdate应该是提到的优化方法里面提到最多的,使用的也是最多的,如果返回false,就会阻止下面组件的渲染,反之,返回true,就会进行接下来的渲染,默认返回的事true。但是有个问题,shouldComponentUpdate进行的是浅比较,为什么不进行深比较,因为伤不起,深比较的耗费性能可能比每次render的效率还要低。
class Nest extends React.Component {
shouldComponentUpdate = (nextProps, nextState) => {
return (
!shallowEqual(this.props, nextProps) ||
!shallowEqual(this.state, nextState)
)
}
render() {
console.log('inner')
return <div>Nest</div>
}
}
为什么进行的事浅比较,我们从源码方面来看一下:
const hasOwn = Object.prototype.hasOwnProperty
function is(x, y) {
if (x === y) {
return x !== 0 || y !== 0 || 1 / x === 1 / y
} else {
return x !== x && y !== y
}
}
export default function shallowEqual(objA, objB) {
if (is(objA, objB)) return true
if (typeof objA !== 'object' || objA === null ||
typeof objB !== 'object' || objB === null) {
return false
}
const keysA = Object.keys(objA)
const keysB = Object.keys(objB)
if (keysA.length !== keysB.length) return false
for (let i = 0; i < keysA.length; i++) {
if (!hasOwn.call(objB, keysA[i]) |