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

【问题标题】：Any reason for a react state hook set callback to fire twice?反应状态挂钩设置回调触发两次的任何原因？
【发布时间】：2020-08-15 23:41:00
【问题描述】：

我有这个简单的代码：

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两次）。这是为什么呢？

【问题讨论】：

这是在 on purpose 在开发模式下完成的。
@PatrickRoberts，哦，我明白了，所以...我该如何避免呢？
你没有。在生产模式下它不会这样做，而在开发模式下，如果您执行突变或在外部存储状态以响应钩子，它会快速揭示问题。简而言之，没有什么问题，也没有什么需要修复的。

标签： javascript reactjs socket.io callback react-hooks

【解决方案1】：

这是 React 的 strict mode 的一个功能（不，这不是错误）。

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

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

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

【讨论】：