有什么理由让一个react state hook set回调触发两次？

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的一个特性 严密模式 不，这不是一个bug）。

该 setState() 更新器功能。除其他方法外，仅在开发模式下，在严格的上下文中被调用两次，以快速揭示常见的反模式，包括状态突变和外部管理状态。

这些努力是为即将到来的 并发模式随着react的渲染阶段的内部实现越来越复杂，预计每次渲染都会定期多次调用这些方法。

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