如何用React Hooks重构现有代码？我的重构方案是否可复用？

嘿，你的重构思路方向是对的，但有几个关键细节没对齐原类组件的行为，咱们一步步捋清楚：

现有重构方案的问题点 #

• props接收方式错误：函数组件的参数是单个props对象，不是分开的独立参数。你当前的写法会把所有传入的props都塞进第一个参数value1里，剩下的参数都会是undefined，这完全不符合React组件的传参规范。
• props到state的同步逻辑缺失：原类组件的getDerivedStateFromProps会在每次props更新时把value1/value2同步到state，但你用useState(value1)只会在组件挂载时设置初始值，后续props变化时不会自动更新count1/count2，这会导致本地state和props脱节。
• useEffect执行时机不符：原类的componentDidUpdate只在组件更新（非首次渲染）时执行，但你写的useEffect(() => someRandomStuffs(count1, count2))没有依赖数组，会在**每次渲染（包括首次挂载）**都执行，和原组件的行为不一致。

修正后的重构方案 #

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

function MyFunction(props) {
  // 解构props，让代码更清晰
  const { value1, value2, onCount1Change, onCount2Change, someRandomStuffs } = props;

  // 初始化本地state
  const [count1, setCount1] = useState(value1);
  const [count2, setCount2] = useState(value2);

  // 用useRef标记是否为首次渲染，对应componentDidUpdate的执行时机
  const isFirstRender = useRef(true);

  // 模拟getDerivedStateFromProps：监听props变化，同步到本地state
  useEffect(() => {
    setCount1(value1);
  }, [value1]);

  useEffect(() => {
    setCount2(value2);
  }, [value2]);

  // 模拟componentDidUpdate：仅在组件更新时执行，跳过首次渲染
  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }
    someRandomStuffs(count1, count2);
  }, [count1, count2, someRandomStuffs]);

  const handleChange1 = ({ target: { value } }) => {
    setCount1(value);
    onCount1Change(value);
  };

  const handleChange2 = ({ target: { value } }) => {
    setCount2(value);
    onCount2Change(value);
  };

  return (
    <div>
      <input type="text" value={count1} onChange={handleChange1} />
      <input type="text" value={count2} onChange={handleChange2} />
    </div>
  );
}

方案说明 #

• 修正了props的接收方式，通过解构获取属性，符合React函数组件的规范；
• 用两个独立的useEffect分别监听value1和value2的变化，完美对齐getDerivedStateFromProps的同步逻辑；
• 用useRef标记首次渲染，确保someRandomStuffs只在组件更新时执行，和原类componentDidUpdate的行为完全一致；
• 事件处理函数的逻辑和原类保持一致，更新本地state的同时调用props传入的回调。

关于其他类组件的重构 #

当然可以用类似的思路重构其他类组件，但要注意精准对齐原组件的生命周期逻辑：

• 对于getDerivedStateFromProps，通常用useEffect监听对应的props变化来同步state；如果是简单的props映射，甚至可以直接使用props而不需要维护本地state（你的场景因为需要本地修改后同步回props，所以必须保留state）；
• 对于componentDidMount，用空依赖数组的useEffect即可模拟；
• 对于componentDidUpdate，要注意区分首次渲染，useRef标记是常用手段；如果原组件有条件执行逻辑（比如仅在某个props变化时执行），要在useEffect内部添加对应的条件判断；
• 对于componentWillUnmount，可以在useEffect的返回函数里实现资源清理逻辑。

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