英文:
React - Updating a component's state with the same value triggers a render
问题
当我多次使用 useState 并且其值与先前的值相同时，组件会执行一次，然后不再执行。
从我目前的理解来看，当状态更新为相同的值时，不应该发生任何事情。
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
console.log('RENDER');
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount((c) => c + 1)}>+</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
);
}
export default App;
如果我多次按+按钮（假设按了3次），状态会发生变化，组件会执行3次。每次都会在控制台中显示 "RENDER" 消息。
但是，如果现在我多次按重置按钮，首先会显示 "RENDER" 消息两次，然后不再显示。
第一次是因为状态从3变为0。
第二次，状态仍然相同。那么为什么控制台中再次显示 "RENDER"？
英文:
When I use useState several times with the same value as the previous value, the component is executed once and then nothing.
From what I understand so far, when the state is updated with the same value, nothing should happen.
import { useState } from 'react'
function App() {
const [count, setCount] = useState(0)
console.log('RENDER')
return (
<div>
<h1>{count}</h1>
<button onClick={() => setCount((c) => c + 1)}>+</button>
<button onClick={() => setCount(0)}>Reset</button>
</div>
)
}
export default App
If I press the + button several times (let's say 3 times), the state changes and the component is executed 3 times. The RENDER message is also displayed in the console each time.
If now I press the reset button several times. I have the message RENDER which is displayed twice then nothing.
The first time because the state changes, 3 to 0.
The second time, the state is the same. So why is RENDER displayed again in the console?
答案1
得分: 2
这应该给你一些想法：
https://legacy.reactjs.org/docs/hooks-reference.html#functional-updates
如果你的更新函数返回与当前状态完全相同的值，那么后续的重新渲染将完全跳过。
这基本上意味着当你第一次调用 setState(0) 时，它返回 0，但当前状态是 3，虚拟 DOM 将其视为更新真实 DOM 的要求，导致重新渲染发生。这也告诉虚拟 DOM 引发后续的重新渲染。
第二次调用 setState(0) 时，当前状态为 0，要设置的值也是 0，这意味着不应该根据值 0 触发任何后续的重新渲染，但应该执行重新渲染以更新虚拟和真实 DOM，以使状态 "锁定" 为 0。同样，不会触发基于值 0 的后续重新渲染。
英文:
This should give you some idea
https://legacy.reactjs.org/docs/hooks-reference.html#functional-updates
> If your update function returns the exact same value as the current state, the subsequent rerender will be skipped completely.
This essentially means that when your setState(0) gets called the first time, it returns 0 but the current state is 3 which the virtual DOM evaluates it as a requirement to update the real DOM causing the re-render to occur. This also tells the virtual DOM to <b>cause</b> subsequent re-renders too.
The second time you call setState(0) the current state is 0 and the value to set is also 0 which means there should not be any subsequent re-renders based on the value 0 but a re-render should be performed to update the virtual and real DOM to have a "locked" state of 0. Again, subsequent re-renders based on the value 0 won't be triggered.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论