ref的状态更新与ref异步更新

Question

React的状态更新是异步，这就是为什么您不应该在设置状态(如、logging、或、任何其他读取操作)之后尝试使用它。但是，只有异步关键字似乎没有给出如何响应更新状态的总体情况。

这个状态更新与异步完成的ref更新有什么不同？

考虑下面的片段，我们在其中模拟异步更新statefulRef。即使在更新了asynchronously，之后(如果在更新之后访问statefulRef )，也会得到最新的值。但state的情况并非如此。我知道呈现和闭包都参与解释了这个state更新，但我想得到一个详细的答案，解释异步行为的差异，我们在下面看到:-

​

const {
  useState,
  useRef
} = React

function App() {
  const [state, setState] = useState({current:0});
  const statefulRef = useRef(0);

  function updateState() {
    // below is async operation
    setState({current:state.current + 1});
    // below is async logging
    setTimeout(() => console.log("React state : ",state.current), 500);
  }

  function updateRef() {
    // below is async operation
    setTimeout(() => statefulRef.current += 1, 200);
    // below is async logging
    setTimeout(() => console.log("React ref : ",statefulRef.current), 500);
  }

  return ( 
    <div >
    <button onClick = {updateState}> Update State </button> 
    <button onClick = {updateRef}> Update Ref </button> 
    </div>
  )

}

ReactDOM.render( < App / > , document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

​

Answer 1

state在程序执行进入updateState函数时被捕获。因此，无论是否使用console.log，setTimeout都会显示一个过时的值。

statefulRef也是如此，当updateRef的执行开始时，它就会被捕获。但是statefulRef是一个对象，在JavaScript中对象是引用。捕获的是引用，而不是值(属性的值)。因此，即使statefulRef不会改变，statefulRef.current也会改变。然而，对于state，事情或多或少是这样工作的：

function updateRef() {
    const current = statefulRef.current;
    // below is async operation
    setTimeout(() => (statefulRef.current += 1), 200);
    // below is async logging
    setTimeout(() => console.log("React ref : ", current), 500);
}

UPDATE: state本身是一个对象的事实(如更新的问题)，并没有什么变化。setState用一个新的值代替了旧的值，在不改变state本身的情况下，它不会分配给state的属性。您可以通过执行state.current = 1来实现类似的目标，但是您不应该这样做，因为它会打破React关于状态管理的假设。