面试题：React组件生命周期与函数式组件优化

在函数式组件中，可以使用React.memo来实现类似shouldComponentUpdate的功能以优化性能。React.memo是一个高阶组件，它会对函数式组件进行浅比较，如果组件的props没有发生变化，React将不会重新渲染该组件。

思路

使用React.memo包裹函数式组件：React.memo会自动对传入的props进行浅比较。如果props没有变化，组件不会重新渲染。
自定义比较函数（可选）：如果浅比较不能满足需求，可以传入一个自定义的比较函数，该函数接收prevProps和nextProps作为参数，返回一个布尔值来决定组件是否应该更新。

示例代码

import React from 'react';

// 普通函数式组件
const MyComponent = ({ value }) => {
  console.log('Component rendered');
  return <div>{value}</div>;
};

// 使用React.memo包裹的函数式组件
const MemoizedComponent = React.memo(({ value }) => {
  console.log('Memoized Component rendered');
  return <div>{value}</div>;
});

// 自定义比较函数
const areEqual = (prevProps, nextProps) => {
  // 这里进行更复杂的比较，例如比较对象的深层属性
  return prevProps.value === nextProps.value;
};

const CustomMemoizedComponent = React.memo(({ value }) => {
  console.log('Custom Memoized Component rendered');
  return <div>{value}</div>;
}, areEqual);

const App = () => {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <MyComponent value={count} />
      <MemoizedComponent value={count} />
      <CustomMemoizedComponent value={count} />
    </div>
  );
};

export default App;

在上述代码中：

MyComponent是一个普通的函数式组件，每次父组件重新渲染，它都会重新渲染。
MemoizedComponent使用React.memo包裹，当value没有变化时，不会重新渲染。
CustomMemoizedComponent使用了自定义比较函数areEqual，可以进行更复杂的比较逻辑。

星途面试题库

面试题：React组件生命周期与函数式组件优化

知识考点

面试题答案

思路

示例代码