javascript - 在状态变化时使用react，useState 和 useEffect 是否也更新了？

Question

当状态改变时，组件更新到什么程度？比方说，当状态A发生变化时，我可以在Component中读取render的控制台日志。我想知道语句 useState 发生了什么，因为初始值设置为 1，因为不应忽略初始值。当我调用 someFunction 时，a 现在变为 2，但是如果发生重新渲染，const [a,setA] = useState(1) 会发生什么情况？

对于 useEffect，当状态 A 改变时，我也认为 useEffect 被重新声明(当然，依赖性已经改变!)，但是之前声明的 useEffect 版本发生了什么？

每当我点击按钮时，都会生成新版本的 useState 和 useEffect，那么这些对的旧版本会怎样？它们是否存储在浏览器的某种内存中？从 React 调试器来看，我们可以使用以前的状态值导航到以前的外观，这意味着状态的快照以某种方式存储。我 super 好奇他们在哪里!如果这是真的，当一定数量的状态变化超过内存限制时，我们的应用程序是否会陷入危机？

期待收到有关此问题的任何反馈!

const Component = () => {
  console.log('render component');
  const [a, setA] = useState(1);
  
  const someFunction = () => {
    console.log('some function')
    setA(prev=>prev+1)
  }

  useEffect(() => {
    console.log('use effect')  
    console.log(a);
  }, [a])
 
  return <>
    <div onClick={someFunction}>Click</div>
  </>
  
}

Answer 1

what happens to the statement useState since the initial value is set at 1 because the initial value should not be ignored

当一个组件首次挂载时，它内部使用的任何 useState 都会在 React 的内部创建一个映射到该状态的值。它的初始值是传递给 useState 的参数。它可能就像一个数组。例如，如果您有

const [a, setA] = useState(1);
const [b, setB] = useState(5);

然后，一旦组件呈现，React 就会在内部存储类似的东西

[1, 5]

对应第一状态和第二状态。

当你设置状态时，React 内部的相应值会发生变化。例如，如果你跑了一次:

setA(prev=>prev+1)

React 将拥有

[2, 5]

然后组件会重新渲染。在重新渲染时，初始状态(传递给 useState)被忽略——相反，有状态值取自 React 内部的值。所以用

const [a, setA] = useState(1);
const [b, setB] = useState(5);

重新渲染时，a 的计算结果为 2，而 b 的计算结果为 5。

what happen to the old versions of these pairs?

旧的值如果没有任何东西可以引用它们，可能会被垃圾收集。 (状态设置函数是稳定的。)

For useEffect, when state A changes, I also think useEffect is re-claimed (and for sure, dependency has changed!), but what happen to the previously stated version of useEffect?

是的，对于新的渲染，先前的 useEffect 回调函数最终将被垃圾收集，React 在内部用当前渲染的新效果回调函数替换它们。

when certain amount state changes exceeds the memory limit, would our app be in crisis?

不，因为先前渲染中未使用的对象将被垃圾收集。

当足够多的对象在内存中堆积并被垃圾收集时，以下代码片段将记录 Just got GC'd!:

const r = new FinalizationRegistry(() => {
  console.log('Just got GCd!');
});

const App = () => {
    const [someObj, setSomeObj] = React.useState({ num: 0 });
    setTimeout(() => {
        r.register(someObj);
        setSomeObj({ num: someObj.num + 1 });
    }, 100);
    return JSON.stringify(someObj);;
};

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>