反应状态挂钩设置回调触发两次的任何原因？

Question

我有这个简单的代码：

const [state, setState] = useState([]);

useEffect(() => {
  socket.on('something', data => {
    console.log('ONE');

    setState(old => {
      console.log('TWO');

      const newArr = [...old];

      // do something to newArr
      return newArr;
    });
  });

  return () => {
    socket.off('something');
  };
}, []);

一切都按预期工作，但由于某种原因something回调触发一次（ONE打印一次），但在我设置状态时，setState回调被调用两次（打印TWO两次）。这是为什么？

Answer 1

这是 React严格模式的一个特性（不，这不是错误）。

该setState()更新功能，在其他方法中，是在发展方式严格的情况下只是为了迅速揭示常见的反模式，包括国家突变和外部管理的状态中两次调用。

这些努力是为即将到来的并发模式做准备，随着反应的渲染阶段的内部实现变得更加复杂，预计每次渲染都会定期多次调用这些方法。

简而言之，没有什么需要修复的。React 只是让您在开发中更容易发现逻辑错误，同时在生产中保持高性能。