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两次(。为什么？

Answer 1

这是React严格模式的一个特性(不，这不是bug(

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

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

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