React 如何保持组件状态？

Question

This is kind of a question about the internals of react.js. Here is how I understand the virtual dom.

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

during comparison the function sees that the old snapshot is empty. we create our elements, and elements from the component <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>

let's say the <X/> component is updated for the second time, and <AnotherComponent/> has changed its state before the update of the parent.

okay, i compare the two snapshots, apply the changes. but <AnotherComponent/> will reset its state and I will have {count:0} instead of {count:1} .

how react.js or any other declarative js library for building ui do kind of stuff. maybe I'm getting something wrong.

i think I need to get the state of the old component and assign it to a new component. is this the right way to do it? thanks!

Answer 1

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