想象一下,我们需要更新状态对象中的某些属性。我们还需要保持其他属性完好无损。
const [myState,setMyState] = React.useState({propA: 'FOO'})
我经常这样做:
function update() {
setMyState((prevState) => {
// IS 'prevState' A SHALLOW COPY OR A DIRECT REFERENCE TO THE SAME OBJECT
});
}
问题
prevState
是浅拷贝还是对同一个对象的直接引用?如果是直接引用,基本上就是同一个对象,对吧?
最佳答案
正如您从下面的代码片段中看到的那样,prevState
是对当前状态对象的直接引用。换句话说,由于对象基本上是引用,prevState
是与当前状态完全相同的对象。
您可以在下面的代码片段中看到该行为:
注意:看到当你更新状态而不是浅拷贝状态时,你改变了状态对象,但你不会触发重新渲染,因为 react 只检查对象引用,这仍然是一样的,因为您返回了完全相同的对象,并且对它具有完全相同的引用。
function App() {
const[myState,setMyState] = React.useState({propA: 'FOO'});
function handleClick() {
console.clear();
setMyState((prevState) => {
console.log('myState: ' + JSON.stringify(myState));
console.log('prevState: ' + JSON.stringify(prevState));
console.log('Are "myState" and "prevState" the very same object: ' + JSON.stringify(prevState === myState));
const shallowCopy = {...prevState}
console.log('shallowCopy of prevState: ' + JSON.stringify(shallowCopy));
console.log('Are "shallowCopy" and "prevState" the very same object: ' + JSON.stringify(shallowCopy === myState));
return prevState;
});
}
function updateWithShallowCopy() {
setMyState((prevState)=>{
const shallowCopy = {...prevState};
shallowCopy.propA = 'BAR<-------------------------------------';
return shallowCopy;
});
}
function updateWithoutShallowCopy() {
setMyState((prevState)=>{
prevState.propA = 'BAR';
return prevState;
});
}
return(
<React.Fragment>
<div>{myState.propA}</div>
<button onClick={handleClick}>Click to inspect</button>
<button onClick={updateWithoutShallowCopy}>Update WITHOUT shallow copy</button>
<button onClick={handleClick}>Click to inspect</button>
<button onClick={updateWithShallowCopy}>Update WITH shallow copy</button>
<div>Click in all buttons in order from left to right</div>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));
<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="root"/>
关于javascript - 在 React Hook 的 setState() 调用中访问当前状态时,prevState 变量是状态对象的副本还是直接引用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56775492/