javascript - 在 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 是与当前状态完全相同的对象。

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

注意:看到当你更新状态而不是浅拷贝状态时，你改变了状态对象，但你不会触发重新渲染，因为 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"/>