如何将类组件中的static getDerivedStateFromProps转换为函数组件实现？

首先得说，你原来的类组件写法本身就有问题——getDerivedStateFromProps 是纯静态方法，绝对不能在里面写副作用逻辑（比如setTimeout、路由跳转），这个方法的设计初衷是根据 props 同步更新 state，不能包含异步操作或会产生副作用的代码。

下面是函数组件的替代实现方案：
在函数组件里，这类依赖 props 变化的副作用逻辑，我们用 useEffect 钩子来处理，具体步骤如下：

• 监听 props.security.validToken 的变化，当它为真时执行跳转逻辑
• 必须清理定时器，避免组件卸载后定时器还触发导致内存泄漏
• 路由跳转部分，React Router v6 用 useNavigate 替代 history.push；v5 则用 useHistory

代码示例（React Router v6） #

import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';

const YourComponent = (props) => {
  const navigate = useNavigate();
  const timerRef = useRef(null);

  useEffect(() => {
    if (props.security.validToken) {
      timerRef.current = setTimeout(() => {
        const product_type = localStorage.getItem("types");
        switch(product_type) {
          case "imp":
            navigate("/imported");
            break;
          case "branded":
            navigate("/brands");
            break;
          case "imp,branded":
          case "branded,imp":
            navigate("/imported-brands");
            break;
          case "local":
            navigate("/local");
            break;
          default:
            // 可添加默认跳转逻辑或留空
            break;
        }
      }, 1000);
    }

    // 组件卸载/依赖项变化时清理定时器
    return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current);
      }
    };
  }, [props.security.validToken, navigate]);

  // 组件其他逻辑...
  return <div>你的组件内容</div>;
};

export default YourComponent;

关键说明 #

1. 副作用归位：函数组件中所有依赖外部变化的副作用（异步操作、路由跳转等）都要放在useEffect里，不能像类组件那样混在状态更新方法中。
2. 定时器清理：用useRef保存定时器ID，在useEffect的清理函数里清除，防止组件卸载后触发无效操作。
3. 路由钩子适配：如果项目用 React Router v5，把useNavigate换成useHistory即可：

   const history = useHistory();
   // 跳转时用 history.push("/xxx")
   

4. 代码优化：把原代码的多分支else if改成switch，可读性和维护性更强。

内容的提问来源于stack exchange，提问作者user8210845