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

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 的一个特性 strict mode（不，这不是一个错误）。

setState() 更新程序函数 among other methods 在开发模式期间在严格的上下文中被调用两次，只是为了快速揭示常见的反模式，包括状态突变和外部管理的状态。

这些努力是为即将到来的 concurrent mode 做准备，随着 React 渲染阶段的内部实现变得越来越复杂，预计每次渲染都会多次调用这些方法。

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