Use setState transaction for TransitionGroup instead of extra property
Ben Alpert committed
Apr 1, 2015 at 14:32 UTC
08e4420019f74b7c93e64f59c443970359102530
2 files changed
+13
-17
src/addons/transitions/ReactTransitionGroup.js
+5
-9
@@ -89,8 +89,6 @@ var ReactTransitionGroup = React.createClass({
89
},
90
91
componentDidUpdate: function() {
92
- this.updatedChildren = null;
93
-
92
var keysToEnter = this.keysToEnter;
93
this.keysToEnter = [];
94
keysToEnter.forEach(this.performEnter);
@@ -195,13 +193,11 @@ var ReactTransitionGroup = React.createClass({
193
// This entered again before it fully left. Add it again.
194
this.performEnter(key);
195
} else {
198
- // As this.state.children will not be updated until next render, we keep
199
- // this.updatedChildren state to avoid losing all but the last removal.
200
- // It's cleaned after this.state is updated, in componentDidUpdate.
201
- if (!this.updatedChildren)
202
- this.updatedChildren = assign({}, this.state.children);
203
- delete this.updatedChildren[key];
204
- this.setState({children: this.updatedChildren});
196
+ this.setState(function(state) {
197
+ var newChildren = assign({}, state.children);
198
+ delete newChildren[key];
199
+ return {children: newChildren};
200
+ });
201
}
202
},
203
src/addons/transitions/__tests__/ReactTransitionGroup-test.js
+8
-8
@@ -215,24 +215,24 @@ describe('ReactTransitionGroup', function() {
215
216
var Child = React.createClass({
217
componentDidMount: function() {
218
- log.push('didMount'+this.props.id);
218
+ log.push('didMount' + this.props.id);
219
},
220
componentWillEnter: function(cb) {
221
- log.push('willEnter'+this.props.id);
221
+ log.push('willEnter' + this.props.id);
222
cb();
223
},
224
componentDidEnter: function() {
225
- log.push('didEnter'+this.props.id);
225
+ log.push('didEnter' + this.props.id);
226
},
227
componentWillLeave: function(cb) {
228
- log.push('willLeave'+this.props.id);
228
+ log.push('willLeave' + this.props.id);
229
cb();
230
},
231
componentDidLeave: function() {
232
- log.push('didLeave'+this.props.id);
232
+ log.push('didLeave' + this.props.id);
233
},
234
componentWillUnmount: function() {
235
- log.push('willUnmount'+this.props.id);
235
+ log.push('willUnmount' + this.props.id);
236
},
237
render: function() {
238
return <span />;
@@ -258,14 +258,14 @@ describe('ReactTransitionGroup', function() {
258
259
instance.setState({count: 3});
260
expect(log).toEqual([
261
- 'didMount1', 'didMount2', 'willEnter1', 'didEnter1',
261
+ 'didMount1', 'didMount2', 'willEnter1', 'didEnter1',
262
'willEnter2', 'didEnter2'
263
]);
264
log = [];
265
266
instance.setState({count: 0});
267
expect(log).toEqual([
268
- 'willLeave0', 'didLeave0', 'willLeave1', 'didLeave1',
268
+ 'willLeave0', 'didLeave0', 'willLeave1', 'didLeave1',
269
'willLeave2', 'didLeave2', 'willUnmount0', 'willUnmount1', 'willUnmount2'
270
]);
271
});