如何在React函数式组件的useEffect中实现componentWillReceiveProps逻辑

核心实现思路是通过useEffect的依赖数组监听需要响应变化的props，在回调中执行对应逻辑，基础实现代码如下：

import { useEffect, useState } from 'react';
// react-router v5 用useHistory，v6请替换为useNavigate
import { useHistory } from 'react-router-dom'; 
import _ from 'lodash';

function YourComponent(props) {
  const history = useHistory();
  // useState初始值可根据你原类组件的state初始定义调整
  const [selImg, setSelImg] = useState(props.meetingData?.themeImage);

  useEffect(() => {
    if (_.isEmpty(props.user)) {
      history.push("/signin");
    }
    setSelImg(props.meetingData.themeImage);
  // 依赖数组填写所有需要监听变化的变量
  }, [props.user, props.meetingData.themeImage, history]);

  // 剩余组件逻辑
}

如果需要严格对齐componentWillReceiveProps仅在props更新时触发、首次渲染不执行的特性，可增加一个ref标记位跳过首次执行：

import { useEffect, useState, useRef } from 'react';
import { useHistory } from 'react-router-dom'; 
import _ from 'lodash';

function YourComponent(props) {
  const history = useHistory();
  const [selImg, setSelImg] = useState(props.meetingData?.themeImage);
  // 首次渲染标记
  const isFirstRender = useRef(true);

  useEffect(() => {
    if (isFirstRender.current) {
      isFirstRender.current = false;
      return;
    }
    if (_.isEmpty(props.user)) {
      history.push("/signin");
    }
    setSelImg(props.meetingData.themeImage);
  }, [props.user, props.meetingData.themeImage, history]);

  // 剩余组件逻辑
}

注意事项 #

• 依赖数组内必须填写所有回调中用到的外部变量，避免出现闭包问题
• 引用类型的props建议只填入实际用到的属性，不要直接传入整个对象，防止引用变化导致的不必要回调触发
• 若使用react-router v6，将useHistory替换为useNavigate即可，跳转逻辑改为navigate("/signin")

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