在 React Hook 的 setState() 调用中访问当前状态时，prevState 变量是状态对象的副本还是直接引用？

Question

想象一下，我们需要更新状态中对象内部的一些属性。我们还需要保持其他属性不变。

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是同一个对象的浅拷贝还是直接引用？如果是直接引用，基本上就是同一个对象吧？

Answer 1

从下面的代码片段可以看出prevState 是对当前状态对象的直接引用。换句话说，由于对象基本上是引用，prevState 是与当前状态完全相同的对象。

您可以在下面的代码片段中看到该行为：

注意：看到当你更新状态时没有浅拷贝状态，你改变了状态对象，但是你没有触发一个re-render，因为React 仅检查对象引用，并且保持不变，因为您 return 完全相同的对象，对它的引用完全相同。

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"/>

在 React Hook 的 setState() 调用中访问当前状态时，prevState 变量是状态对象的副本还是直接引用？

When accessing the current state inside a React Hook's setState() call, is the prevState variable a copy or a direct reference to the state object?

javascript

reactjs

react-hooks