求助：将React类组件转换为带useEffect的函数组件

首先需要在函数组件中定义对应原类组件的state，再用useEffect分别对应不同的生命周期逻辑：

import { useState, useEffect } from 'react';

function YourComponent(props) {
  // 初始化与原类组件对应的state
  const [patchVal, setPatchVal] = useState(props.patchTaskVal);
  const [startTime, setStartTime] = useState(props.patchStartTime);
  const [endTime, setEndTime] = useState(props.patchEndTime); // 重命名避免与setter混淆，更符合React命名习惯
  const [showValue, setShowValue] = useState(true);
  const [progressValue, setProgressValue] = useState([]);

  // 对应componentDidMount：组件挂载时初始化state
  useEffect(() => {
    setPatchVal(props.patchTaskVal);
    setStartTime(props.patchStartTime);
    setEndTime(props.patchEndTime);
  }, []); // 空依赖数组 → 仅在组件首次挂载执行一次

  // 对应componentDidUpdate中patchTaskVal变化的逻辑
  useEffect(() => {
    callValidation();
  }, [props.patchTaskVal]); // 仅当patchTaskVal变化时触发

  // 对应componentDidUpdate中closeTask变化的逻辑
  useEffect(() => {
    setShowValue(false);
    setProgressValue([]);
    setStartTime(new Date());
    setEndTime("");
  }, [props.closeTask]); // 仅当closeTask变化时触发

  // 对应componentDidUpdate中patchStartTime或endTime变化的逻辑
  useEffect(() => {
    if (props.endTime !== "") {
      setStartTime(props.patchStartTime);
      setEndTime(parseInt(props.endTime));
    }
  }, [props.patchStartTime, props.endTime]); // 当这两个props变化时触发

  // 原类组件中的callValidation方法转为函数组件内的函数
  const callValidation = () => {
    // 这里填入原this.callValidation的业务逻辑
  };

  return (
    // 组件渲染内容
  );
}

export default YourComponent;

关键逻辑对应说明 #

• 第一个useEffect（空依赖）完全替代componentDidMount，只执行一次初始化操作。
• 针对componentDidUpdate中的三个判断，拆分为三个独立useEffect：每个useEffect的依赖数组精准对应需要监听的props，避免不必要的重复执行。
• 原componentDidUpdate中对比prevProps的逻辑，通过useEffect的依赖数组自动实现——只有依赖项变化时，才会执行回调函数。

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