React性能之--如何避免组件重复渲染?

         在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提供的跨组件传递数据的机制，它可以避免重复渲染整个组件树。