别把 useEffect 当计算器
能把 useEffect 用对的人很多,能忍住不用的人很少。少一个 Effect,就少一条需要维护的数据流。
初学 React 时,我一度把 useEffect 当「监听器」:props 变了要重算个值?上 Effect。A 变了 B 跟着变?上 Effect。直到某天页面上出现了诡异的闪烁——一次多余的渲染把表单重置了——我才停下来想:Effect 到底是什么。
Effect 的本职是同步外部系统:订阅 WebSocket、操作 DOM、发请求。它不是派生状态的算子。如果一个值只依赖 props 和 state,那它在 render 期间直接算出来就好,不需要 Effect,更不需要 setState 再存一份——那等于亲手造了两份数据,然后用 Effect 拼命让它们保持一致。
一个简单的判断法:问自己「这个值,只看现有的 props/state 能不能算出来?」能——直接算;必须和外部世界打交道——才是 Effect 的活。React 官方文档管前者叫「 redundant state 」,修仙的话讲,这叫心魔:本无二心,何必再分。
把那个用来「同步」的 Effect 删掉,闪烁消失了,代码少了十几行,竞态的隐患也一并消失了。少一个 Effect,就少一条要维护的数据流——这是那次踩坑后,我最想写给未来的自己的一句话。
React