mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Pete Hunt
9ac27cb551
The key idea here is that you're always rendering `this.state.children`, not `this.props.children`. When combined with `cloneWithProps()` this means we can keep them in the DOM as long as we want. We add new children and reactively update existing ones using `setState()` inside of `componentWillReceiveProps()` so `this.state.children` always has the latest versions of components. Since we may be keeping old components around that are no longer in `this.props.children` we need a way to figure out where they should be inside of the combined `this.state.children` list. `ReactTransitionChildMapping` does this for us. Based on that infrastructure we can build the interface we always wanted: enter and leave lifecycle hooks. When a component is added to the DOM, `componentWillEnter(callback)` gets called. Call the callback when you're done animating and `componentDidEnter()` will be called. When a component is about to be removed from the DOM, `componentWillLeave(callback)` gets called. Call the callback when you're done animating and `componentDidLeave()` will be called and the component will *actually* be removed from the DOM. It won't be removed until you call the callback. These also handle "concurrent" changes. If you "stack" enter/leaves of a single component before the animation has completed, it will block out all of those animations until the current animation completes, and then finally it will animate 0 or 1 times to get itself into the desired current state. This is what differentiates `componentWillEnter()` from `componentDidMount()`. The next step would be to build `componentDidReorder()`. I've built `ReactCSSTransitionGroup` which is identical to the old `ReactTransitionGroup` and codemodded the callsites.