maxjhandsome
/
react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use setState transaction for TransitionGroup instead of extra property

This commit is contained in:
Ben Alpert 2015-04-01 14:32:22 -07:00
parent 205273d2ee
commit 08e4420019
2 changed files with 13 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/addons/transitions/ReactTransitionGroup.js
View File

@ -89,8 +89,6 @@ var ReactTransitionGroup = React.createClass({
},
componentDidUpdate: function() {
this.updatedChildren = null;
var keysToEnter = this.keysToEnter;
this.keysToEnter = [];
keysToEnter.forEach(this.performEnter);
@ -195,13 +193,11 @@ var ReactTransitionGroup = React.createClass({
// This entered again before it fully left. Add it again.
this.performEnter(key);
} else {
// As this.state.children will not be updated until next render, we keep
// this.updatedChildren state to avoid losing all but the last removal.
// It's cleaned after this.state is updated, in componentDidUpdate.
if (!this.updatedChildren)
this.updatedChildren = assign({}, this.state.children);
delete this.updatedChildren[key];
this.setState({children: this.updatedChildren});
this.setState(function(state) {
var newChildren = assign({}, state.children);
delete newChildren[key];
return {children: newChildren};
});
}
},

16
src/addons/transitions/__tests__/ReactTransitionGroup-test.js
View File

@ -215,24 +215,24 @@ describe('ReactTransitionGroup', function() {
var Child = React.createClass({
componentDidMount: function() {
log.push('didMount'+this.props.id);
log.push('didMount' + this.props.id);
},
componentWillEnter: function(cb) {
log.push('willEnter'+this.props.id);
log.push('willEnter' + this.props.id);
cb();
},
componentDidEnter: function() {
log.push('didEnter'+this.props.id);
log.push('didEnter' + this.props.id);
},
componentWillLeave: function(cb) {
log.push('willLeave'+this.props.id);
log.push('willLeave' + this.props.id);
cb();
},
componentDidLeave: function() {
log.push('didLeave'+this.props.id);
log.push('didLeave' + this.props.id);
},
componentWillUnmount: function() {
log.push('willUnmount'+this.props.id);
log.push('willUnmount' + this.props.id);
},
render: function() {
return <span />;
@ -258,14 +258,14 @@ describe('ReactTransitionGroup', function() {
instance.setState({count: 3});
expect(log).toEqual([
'didMount1', 'didMount2', 'willEnter1', 'didEnter1',
'didMount1', 'didMount2', 'willEnter1', 'didEnter1',
'willEnter2', 'didEnter2'
]);
log = [];
instance.setState({count: 0});
expect(log).toEqual([
'willLeave0', 'didLeave0', 'willLeave1', 'didLeave1',
'willLeave0', 'didLeave0', 'willLeave1', 'didLeave1',
'willLeave2', 'didLeave2', 'willUnmount0', 'willUnmount1', 'willUnmount2'
]);
});