React疑问：无依赖项useEffect实现的状态更新能否替换为直接调用setState？

首先看原代码的问题：
原useEffect的依赖数组是空的[]，这意味着它只会在组件挂载时执行一次。但它的逻辑依赖于props.complete，如果后续complete的值发生变化，这个useEffect不会重新执行，state.color也不会跟着更新——这本身就是一个bug。另外，useEffect里用到了state，却没把它加入依赖数组，还会导致闭包问题，拿到的state永远是初始值。

再看你提出的替代写法的问题：
你直接在组件函数体顶层调用setState，这会导致无限渲染循环。原因很简单：组件渲染时执行setState，setState会触发组件重新渲染，重新渲染又会再次执行setState，循环往复直到React限制渲染次数。

正确的处理方式分两种情况： #

情况1：color完全由props.complete决定（没有本地修改需求） #

这是最优解——既然color的值完全可以通过complete计算出来，根本不需要把它存在state里，直接派生即可：

const defaultState = { /* some object */ };
const SomeComponent = ({ complete }) => {
  const { icon } = defaultState; // 如果icon不需要修改的话
  const color = complete ? '#61a60e' : 'red';
  
  // 后续直接使用color和icon即可
};

如果defaultState里的其他属性也可能需要本地修改，那可以只把需要本地维护的属性放进state，color依然通过props计算：

const defaultState = { /* some object */ };
const SomeComponent = ({ complete }) => {
  const [state, setState] = useState(defaultState);
  const { icon } = state;
  // 直接根据complete计算color，不需要state存储
  const color = complete ? '#61a60e' : 'red';
  
  // 后续如果需要修改icon等属性，调用setState即可
};

情况2：必须把color存在state里（比如后续有本地修改逻辑） #

如果确实需要将color存在组件state中（比如用户可以手动修改color，覆盖props的影响），那应该修复原useEffect的依赖问题，并且使用函数式更新避免闭包陷阱：

const defaultState = { /* some object */ };
const SomeComponent = ({ complete }) => {
  const [state, setState] = useState(defaultState);
  const { color, icon } = state;

  useEffect(() => {
    // 使用函数式更新，确保拿到最新的state
    setState(prevState => ({ 
      ...prevState, 
      color: complete ? '#61a60e' : 'red' 
    }));
  }, [complete]); // 把依赖的props.complete加入依赖数组

  // etc
};

这样每当complete变化时，useEffect都会重新执行，更新state的color，同时函数式更新保证我们操作的是最新的state，不会有闭包问题。

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