第十九章：useEffect 误区 —— 不是所有自动程序都该装进 Effect

1 分钟 158 字第 41 / 962 个阅读单元

很多 React 新手一学会 useEffect，就开始“凡事都往里塞”。

但 React 官方现在反复强调一件事：

如果某件事可以在渲染时直接算出来，就不要用 Effect。

tsx

function Bill({ temp, price }) {
  const [cost, setCost] = useState(0);

  useEffect(() => {
    setCost(temp * price);
  }, [temp, price]);

  return <div>{cost}</div>;
}

上面其实多绕了一圈。直接写：

tsx

function Bill({ temp, price }) {
  const cost = temp * price;
  return <div>{cost}</div>;
}

什么时候真的该用 Effect？

text

当你要和 React 外部世界同步时：
- 请求接口
- 订阅事件
- 操作 DOM
- 开定时器
- 连 WebSocket

一句话记忆：

Effect 不是“补丁区”，它是“和外部世界接线的地方”。