在react中,我们会发现存在组件会重复渲染,虽然说如果项目不大的话,这点影响不大,但是我们还是尽量避免组件渲染比较好,养成好习惯,尽可能让不管是大小项目,都让性能尽可能优化 。那我们如何避免组件重复渲染呢?
一、在 React 中,可以通过以下几种方法来避免组件重复渲染:
1、PureComponent 或 React.memo:这些是 React 提供的优化组件渲染的高阶组件。 (1)PureComponent:会自动实现了shouldComponentUpdate方法,进行浅比较来判断是否需要重新渲染组件,PureComponent 在 shouldComponentUpdate 方法中对组件的 props 和 state 进行浅比较。在React 16.8之前,建议使用PureComponent来优化组件性能。
(2)React.memo:在React 16.8之后,引入了React.memo。React.memo是一个高阶组件,用于包装函数组件。它与PureComponent类似,也会进行浅比较来判断是否需要重新渲染组件,它对函数组件进行浅比较。如果 props 或 state 没有变化,组件将不会重新渲染。
注意:从React 16.8开始,推荐使用React.memo来优化函数组件的性能,而不再需要使用PureComponent
2、 shouldComponentUpdate:在类组件中,可以手动实现 shouldComponentUpdate 方法来判断组件是否需要重新渲染。在该方法中,可以比较前后的 props 和 state,如果它们没有变化,可以返回 false 阻止组件重新渲染。
3、 React 的 Context API:Context 可以避免跨层级组件的不必要渲染。通过在上层组件中使用 Context.Provider,可以将需要共享的数据传递给子组件。子组件可以通过 Context.Consumer 或 useContext Hook 来获取这些数据,而不需要通过 props 传递。
总的来说,避免组件重复渲染的关键是减少不必要的渲染触发。可以通过使用PureComponent 或 React.memo 来自动检测变化,并且在需要的地方手动实现 shouldComponentUpdate 方法或使
用 Context 来控制渲染。
二、使用
1、PureComponent 或 React.memo
2、 shouldComponentUpdate:
例子:在这个例子中,如果name
和age
没有改变,那么组件的render
方法将不会被调用。这对于避免不必要的渲染可以提高性能
3、 React 的 Context API
假设我们有一个简单的计数器组件,它包含一个按钮,点击按钮会增加计数器的值。现在我们希望将计数器的值传递给组件树中的其他组件,而不需要通过props将值逐级传递。
使用React的Context API可以实现这个目的。
(1)我们创建一个Context对象
(2)计数器组件:然后,在计数器组件中,我们将CounterContext.Provider包装在按钮周围,并将计数器的值作为value传递给Provider
(3)使用CounterContext.Consumer:现在,我们可以在任何想要访问计数器值的组件中使用CounterContext.Consumer
这样,每当我们点击增加计数器按钮时,只有DisplayCount组件会重新渲染,而不是整个组件树。这是通过Context API提供的跨组件传递数据的机制,它可以避免重复渲染整个组件树。