React 如何保持组件状态？

Question

这是一个关于 react.js 内部的问题。 以下是我对虚拟 dom 的理解。

old  (rendered from component <X/>)        new (rendered from component <X/>)
null                                       <div>
                                            <AnotherComponent/> <- state {count:0}
                                            <p>{this.state.text}</p>
                                           </div>

在比较过程中，该函数发现旧快照为空。我们创建我们的元素，以及来自组件 <AnotherComponent/> 的元素。

old  (rendered from component <X/>)        new (rendered from component <X/>)
<div>                                      <div>
 <AnotherComponent/> <- state {count:1}     <AnotherComponent/> <- state {count:0} ?
 <p>Lorem ipsum</p>                         <p>Lorem ...</p> <- state updates
</div>                                     </div>

假设<X/> 组件第二次更新，<AnotherComponent/> 在父组件更新之前已更改其状态。

好的，我比较两个快照，应用更改。但<AnotherComponent/> 将重置其状态，我将拥有{count:0} 而不是{count:1}。

react.js 或任何其他用于构建 ui 的声明性 js 库如何做一些事情。可能是我搞错了。

我想我需要获取旧组件的状态并将其分配给新组件。 这是正确的方法吗？ 谢谢！

Answer 1

据我所知，React 使用closure 来捕获重新渲染之间的状态。