我是React Hooks的初学者,遇到了一个我几乎不了解的问题。
在代码1中,如果我理解正确,则useState()
中传递的count的初始值与按钮按下时setCount()
中传递的值相同,并且Counter组件的子组件不应为重新渲染。
代码1:
function Counter() {
const [count, setCount] = useState(1);
console.log("in", count)
return (
<div>
<h1>{count}</h1>
<button onClick={() => {
console.log("click")
setCount(1)
}}>click</button>
</div>
);
}
但是在代码2中,如果传递给setCount()
的值不同(并且count
的初始值为1),则必须重新渲染Counter组件的子组件一次,而不是不止一次。
但是由于某种原因,它也会重新渲染一次(当count状态为2且值为setCount(2)时),并且不超过一次,这完全不应该发生,因为count状态为2且setCount(2)表示状态不变。
代码2:
function Counter() {
const [count, setCount] = useState(1);
console.log("in", count)
return (
<div>
<h1>{count}</h1>
<button onClick={() => {
console.log("click")
setCount(2)
}}>click</button>
</div>
);
}
我不确定我对React Hooks上的useState()
的理解是否正确。或者,如果有人可以澄清React Hooks useState的详细工作原理,将不胜感激。
P.S 我正在使用的react hooks版本是: 16.8.6
答案 0 :(得分:0)
useState
挂钩的实现是这样的:当使用相同的值执行更新时,调用状态更新程序需要额外的时间。这可能是由于React使用具有到期时间的Fiber体系结构这一事实,该时间对于确定React将在什么时间提交更新以进行初始更改(无论它先前是否更新过该值)和触发重新呈现都非常有用。从那时起开始进行批处理。但是,在第一种情况下,最初提交的值与您传递用于更新的值相同,因此不会触发重新渲染
function Counter() {
const [count, setCount] = React.useState(1);
console.log("in", count)
return (
<div>
<h1>{count}</h1>
<button onClick={() => {
setCount(2)
}}>click</button>
</div>
);
}
ReactDOM.render(<Counter />, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="app"/>