react中的功能组件是否触发重新渲染?

Question

在react功能组件中，文档指定将状态更新为与前一个状态相同的值，不会导致重新呈现(https://reactjs.org/docs/hooks-reference.html#bailing-out-of-a-state-update)

如果你将状态钩子更新为与当前状态相同的值，React将在不渲染孩子或射击效果的情况下跳出。(React使用Object。是比较算法。)

在这段代码中-

const App = () => {
const [resourceType, setResourceType] = useState('posts');

console.log('abc');

return (
<>
<button onClick={() => setResourceType('posts')}>posts</button>
<button onClick={() => setResourceType('users')}>users</button>
<button onClick={() => setResourceType('comments')}>comments</button>
<h2>{resourceType}</h2>
</>
);
}

当我继续点击不同的按钮时，我可以看到abc对于控制台中每个不同的按钮单击，这是正确的，因为resourceType正在改变并且页面重新呈现。然而，当我第二次点击同一个按钮时，我仍然可以看到abc正在登录控制台，这很奇怪，因为文档提到设置与当前状态相同的值不会导致重新渲染。

令我惊讶的是，当我点击同一个按钮三次甚至更多次时，abc不再被记录，就好像有人告诉他不轮到他一样。有人能帮我解释一下反应的行为吗?

Answer 1

当你将状态设置为与前一个完全相同的值时，为什么你可能会得到渲染，以下是Facebook开发人员的评论。

我链接的问题解释了一个类似的问题，即单击将状态设置为相同值的按钮会导致在第一次和第二次单击时重新渲染，而不是第三次单击。渲染发生两次的原因是:

由于React中并发性的实现细节，这是一个已知的怪癖。我们不知道当前提交的是两个版本中的哪一个。当这种歧义发生时，我们必须过度渲染一次，之后我们知道两个版本是相同的，这并不重要。