React状态钩子设置回调函数为什么会触发两次？

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

- TheNormalPerson

---

这是在开发模式下有意为之做的。 - Patrick Roberts

@PatrickRoberts，哦，我明白了，那么...我该怎么避免它呢？ - TheNormalPerson

你不需要这样做。在生产模式下，它不会这样做；在开发模式下，这样做是为了快速揭示问题，如果你对React hooks进行突变或外部存储状态。简而言之，没有任何问题需要修复。 - Patrick Roberts

Answer 1

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

setState()更新函数和其他方法一样，在开发模式下在严格上下文中被调用两次，以便快速检测常见的反模式，包括状态突变和外部管理的状态。

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

简而言之，不需要修复任何内容。React只是让您在开发过程中更容易发现逻辑错误，同时在生产中保持高性能。

- Patrick Roberts