React Hooks组件中在useEffect内做条件状态初始化是否为最佳实践？

首先说结论：你当前的写法不是React Hooks的最佳实践，存在一些可以优化的点，我来帮你拆解问题并给出改进方案：

原写法的核心问题 #

1. 缺少useEffect的依赖数组：你现在的useEffect没有指定依赖项，这会导致组件每次渲染（不管什么原因）都会执行这个effect里的逻辑，不仅浪费性能，极端情况下还可能触发不必要的状态更新，引发重复渲染循环。
2. 多层条件判断过于冗余：嵌套的if可以用更简洁的语法替代，可读性差。
3. 初始化逻辑的时机不够精准：当前逻辑只在educations为空时执行，但如果props.currentProfileInfo是异步加载（比如从接口获取），组件挂载时可能还没拿到数据，后续props更新时如果educations已经有值了，就不会再同步最新的props数据——如果这不是你想要的，就会有问题。

优化方案分两种情况 #

情况1：props.currentProfileInfo在组件挂载时就已存在

如果父组件传递的currentProfileInfo是同步数据（比如一开始就有默认值），那你完全不需要用useEffect，直接在useState的初始值里处理即可，代码更简洁：

export default props => { 
  // 用useState的惰性初始化函数，避免每次渲染都执行props判断
  const [educations, setEducations] = useState(() => {
    // 可选链+空值合并，简化判断逻辑
    return props.currentProfileInfo?.education || [];
  }); 
  const [isAdd, setAdd] = useState(false); 
  const [currentedcuation, setCurrentEducation] = useState(defaultEducation); 
  const [currentid, setCurrentId] = useState("-1"); 

  // 这里可以删掉原来的useEffect了

  return ( 
    <> 
      {educations.map(item => { 
        return ( 
          <EducationElement 
            key={item.id} 
            id={item.id} 
            type={props.type} 
            education={item} 
            currentedcuation={currentedcuation} 
            isAdd={item.id === "-1" || item.id === currentid ? isAdd : false} 
            onSave={onSave} 
            onEdit={onEdit} 
            dataChanged={dataChanged} 
          /> 
        ); 
      })} 
    </> 
  ); 
}

情况2：props.currentProfileInfo是异步加载的（比如从接口获取）

如果currentProfileInfo是后续才会更新的异步数据，那必须给useEffect加上精准的依赖数组，同时简化判断逻辑：

export default props => { 
  const [educations, setEducations] = useState([]); 
  const [isAdd, setAdd] = useState(false); 
  const [currentedcuation, setCurrentEducation] = useState(defaultEducation); 
  const [currentid, setCurrentId] = useState("-1"); 

  useEffect(() => { 
    // 简化条件：只要props有教育数据，且当前educations为空，就同步
    const targetEducation = props.currentProfileInfo?.education;
    if (targetEducation && educations.length === 0) {
      // 展开数组创建新引用，避免直接引用props的对象（防止后续props变化意外修改状态）
      setEducations([...targetEducation]); 
    } 
    // 依赖数组：只有当props.currentProfileInfo或educations长度变化时才执行
  }, [props.currentProfileInfo, educations.length]); 

  return ( 
    <> 
      {educations.map(item => { 
        return ( 
          <EducationElement 
            key={item.id} 
            id={item.id} 
            type={props.type} 
            education={item} 
            currentedcuation={currentedcuation} 
            isAdd={item.id === "-1" || item.id === currentid ? isAdd : false} 
            onSave={onSave} 
            onEdit={onEdit} 
            dataChanged={dataChanged} 
          /> 
        ); 
      })} 
    </> 
  ); 
}

额外补充：如果需要同步props的更新 #

如果你希望educations始终和props.currentProfileInfo.education保持同步（而不仅仅是初始化），可以去掉educations.length === 0的判断，同时添加浅比较避免不必要的状态更新：

// 可以自己写一个简单的浅比较函数，或者用lodash.isEqual
const isArrayEqual = (arr1, arr2) => {
  if (arr1.length !== arr2.length) return false;
  return arr1.every((item, index) => item.id === arr2[index].id);
};

useEffect(() => { 
  const targetEducation = props.currentProfileInfo?.education || [];
  // 只有当数组内容不同时才更新状态
  if (!isArrayEqual(educations, targetEducation)) {
    setEducations([...targetEducation]); 
  } 
}, [props.currentProfileInfo, educations]);

总结 #

React Hooks的最佳实践中，useEffect必须明确指定依赖数组，这是避免不必要渲染和bug的关键；同时尽量简化逻辑判断，优先用useState的初始值处理同步初始化，异步数据则用带依赖的useEffect处理，这样代码更清晰、性能更优。

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