在状态变化时的反应中，useState和use效应是否也更新了？

Question

当状态更改时，组件的更新程度如何？比方说，当状态A发生变化时，我可以读取render in组件的控制台日志。我想知道useState语句会发生什么情况，因为初始值设置为1，因为不应该忽略初始值。当我调用某个函数时，a现在变为2，但如果发生重新排序，const[a，setA]=useState（1）会发生什么情况？

对于useEffect，当状态A发生变化时，我还认为useEffect会被重新声明（当然，依赖关系也发生了变化！），但是之前声明的useEffect版本会发生什么变化呢？

每当我点击按钮时，就会生成新版本的useState和use效应，这些对的旧版本会发生什么？它们被存储在浏览器的某种内存中吗？从响应调试器判断，我们可以导航到以前的状态值，这意味着状态的快照以某种方式存储。我超级好奇他们在哪里！如果这是真的，当特定数量的状态更改超过内存限制时，我们的应用程序会陷入危机吗？

期待得到任何关于这个问题的反馈！

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

传递给useState的参数是初始状态，非常类似于在类组件的构造函数中设置状态，并且不用于在重新呈现时更新状态

如果您想更新道具更改的状态，请使用use效果钩子

React.use状态不会从道具重新加载状态

Answer 2

由于初始值设置为1，因为初始值不应该被忽略，所以语句useState会发生什么

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

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

然后，一旦组件呈现，React在内部存储类似于

[1, 5]

对应于第一和第二状态。

设置状态时，React内部的相应值会发生变化。例如，如果您运行了一次：

setA(prev=>prev+1)

反应会有

[2, 5]

然后组件将重新渲染。在重新呈现时，将忽略初始状态（传递给useState），相反，状态值取自React internal中的值。所以

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

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

这些配对的旧版本发生了什么？

如果没有任何东西可以再引用旧值，则旧值可能会被垃圾收集。（状态设置器功能稳定。）

对于useEffect，当状态A发生变化时，我还认为useEffect会被重新声明（当然，依赖关系也发生了变化！），但是之前声明的useEffect版本会发生什么变化呢？

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

当特定数量的状态更改超过内存限制时，我们的应用程序会陷入危机吗？

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

下面的代码片段将记录刚刚得到的GC 当足够多的对象堆积在内存中并被垃圾回收时：

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>