React18, StrictMode下useEffect踩坑修复

多见于开发环境。

如果你的React代码中有一段这样的逻辑，用来离开页面后卸载监听。

useEffect(() => unsubscribe, []) 

多用于只执行一次卸载逻辑，比如：

我的页面一进来，startState就为true，但是在离开页面后要单独给它设置一次startState为false

就可能出现这样的代码

const [start, setStart] = useState(true);

useEffect(() => () => setStart(false), []);

它在React18的StrictMode下工作很可能不正常

因为StrictMode下页面会加载两次。那么这段卸载逻辑也会被执行一次，但是第二次加载页面的时候没有哪里的useEffect可以触发setStart(true)，页面逻辑就会出现问题。

解决办法：

建议在useEffect中加入一段启动代码

const [start, setStart] = useState(true);

useEffect(() => {

        setStart(true);

        return () => setStart(false)

}, []);