面试题：如何在 React 最新版本中模拟被废弃的 componentWillReceiveProps 的功能

模拟实现 componentWillReceiveProps 功能：

componentWillReceiveProps 主要用于在组件接收到新的 props 时执行一些操作。在 React hooks 中，可以使用 useEffect 来模拟这一行为。
示例代码如下：

import React, { useEffect, useState } from'react';

const MyComponent = ({ newProp }) => {
  const [prevProp, setPrevProp] = useState(newProp);

  useEffect(() => {
    if (prevProp!== newProp) {
      // 这里执行 componentWillReceiveProps 中原本的逻辑
      console.log('新的 prop 到来，执行相应操作');
      setPrevProp(newProp);
    }
  }, [newProp]);

  return <div>{newProp}</div>;
};

export default MyComponent;

保证性能和逻辑正确性：
- 性能方面：
  - 在 useEffect 的依赖数组中，只传入会导致该副作用执行的 props。例如上述代码中，只传入 newProp，这样只有当 newProp 变化时，useEffect 中的逻辑才会执行，避免了不必要的渲染和副作用执行。
  - 避免在 useEffect 中执行过于复杂的计算。如果有复杂计算，可以考虑在 useMemo 或 useCallback 中进行处理，以优化性能。例如，如果 newProp 是一个对象，且需要对对象的属性进行复杂计算，可以使用 useMemo 来缓存计算结果，避免每次 newProp 变化时都重新计算。
- 逻辑正确性方面：
  - 确保在 useEffect 中对新旧 props 的比较逻辑正确。如上述代码中使用 prevProp!== newProp 来比较，对于简单类型（如字符串、数字）这样的比较是足够的。但如果 newProp 是对象或数组，建议使用更深度的比较方法，如 lodash 的 isEqual 方法，以确保逻辑的正确性。
  - 在 useEffect 中执行的操作应该与 componentWillReceiveProps 原本的设计逻辑一致。例如，如果 componentWillReceiveProps 中有数据请求操作，在 useEffect 中也应确保数据请求的条件、参数等逻辑相同。

星途面试题库

面试题：如何在 React 最新版本中模拟被废弃的 componentWillReceiveProps 的功能

知识考点

面试题答案