程序亦非猿

React中如何能省略不必要的渲染!

2018/04/02 Share

我们除了 render 函数,shouldComponentUpdate 可能是 React 组件生命周期最重要的一个函数了,说 render函数重要,是因为 render 函数决定了该渲染什么,而 shouldComponentUpdate 而是决定了,一个组件什么时候不需要渲染。

render 和 shouldComponentUpdate 函数,也是 React 生命周期函数中只有这两个有返回值的函数,render函数的返回结果是构造 DOM 对象的,而 shouldComponentUpdate 函数返回的是一个布尔值,告诉 React 库这个组件在这次更新中是否要继续。

在更新过程中 React 库首先要调用 shouldComponentUpdate 函数,如果这个函数返回 true,那就会继续更新过程,接下来调用 render 函数,如果返回 false,那就立刻停止更新过程,也就不会引起后续的渲染了

说 shouIdComponentUpdate 重要,就是说只要使用恰当,会大大提升 React 组件的性能,如果没有必要渲染的话就不用渲染,这样会更大提升React组件的性能

render 是一个纯函数,这个纯函数的逻辑输入就是 props 和 state 值,如果我们要定义shouIdComponentUpdate 那就根据这两个参数,外加 this.props 和 this.state 来判断出是返回 true 还是返回 false,默认的是返回 true

CATALOG