面试官：react怎么避免不必要的render

避免不必要的 render 是提高 React 应用性能的关键之一。以下是一些可以帮助避免不必要 render 的方法：

1. 使用 PureComponent 或 React.memo：使用 PureComponent 类组件或 React.memo 高阶组件可以帮助避免不必要的 render。这两者都实现了 shouldComponentUpdate 生命周期方法，通过进行浅比较来判断是否需要重新渲染组件。如果组件的 props 和 state 没有变化，就不会重新渲染组件。

   import React, { PureComponent } from 'react';
   
   class MyComponent extends PureComponent {
     render() {
       return <div>{this.props.text}</div>;
     }
   }

   或者使用 React.memo：

   import React from 'react';
   
   const MyComponent = React.memo(({ text }) => {
     return <div>{text}</div>;
   });

2. 使用 shouldComponentUpdate 生命周期方法：如果不使用 PureComponent 或 React.memo，可以手动实现 shouldComponentUpdate 生命周期方法来进行组件渲染的优化。在 shouldComponentUpdate 方法中，对组件的 props 和 state 进行比较，判断是否需要重新渲染组件。

   class MyComponent extends React.Component {
     shouldComponentUpdate(nextProps, nextState) {
       return nextProps.text !== this.props.text || nextState.count !== this.state.count;
     }
   
     render() {
       return <div>{this.props.text}</div>;
     }
   }