Skip to content

Commit 4d820c6

Browse files
committed
fix double render bug, bump 1.5.0
1 parent 29d12be commit 4d820c6

File tree

5 files changed

+133
-11
lines changed

5 files changed

+133
-11
lines changed

HISTORY.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
History
22

33
---
4+
## 1.5.0
5+
更新多次刷新同一块东西时导至无出场。。具体查看 doubleUpdate demo;
6+
47

58
## 0.11.4 `2016-01-13`
69

examples/doubleUpdate.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
placeholder

examples/doubleUpdate.js

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/* eslint-disable no-console,react/no-multi-comp */
2+
import QueueAnim from 'rc-queue-anim';
3+
import React from 'react';
4+
import ReactDom from 'react-dom';
5+
6+
class App extends React.Component {
7+
constructor(props) {
8+
super(props);
9+
this.index = 100;
10+
this.items = [
11+
{
12+
children: '依次进入1',
13+
key: 1,
14+
}, {
15+
children: '依次进入2',
16+
key: 2,
17+
}, {
18+
children: '依次进入3',
19+
key: 3,
20+
}, {
21+
children: '依次进入4',
22+
key: 4,
23+
}, {
24+
children: '依次进入5',
25+
key: 5,
26+
}, {
27+
children: '依次进入6',
28+
key: 6,
29+
},
30+
];
31+
this.state = {
32+
items: this.items,
33+
type: 'left',
34+
};
35+
}
36+
37+
switch = () => {
38+
this.setState({
39+
items: this.state.items.length ? [] : this.items,
40+
});
41+
}
42+
remove = () => {
43+
console.log('remove: 1');
44+
this.setState({ items: [] }, () => {
45+
console.log('remove: 2');
46+
this.setState({ items: [] }, () => {
47+
console.log('remove: 3');
48+
this.setState({ items: [] });
49+
});
50+
});
51+
}
52+
exchange = () => {
53+
console.log('exchange: 1');
54+
this.setState({
55+
items: [{
56+
children: '依次进入1',
57+
key: 1,
58+
}, {
59+
children: '依次进入2',
60+
key: 2,
61+
}],
62+
}, () => {
63+
console.log('exchange: 2');
64+
this.setState({
65+
items: [{
66+
children: '依次进入1',
67+
key: 1,
68+
}, {
69+
children: '依次进入2',
70+
key: 2,
71+
}],
72+
}, () => {
73+
console.log('exchange: 3');
74+
this.setState({
75+
items: [{
76+
children: '依次进入1',
77+
key: 1,
78+
}, {
79+
children: '依次进入2',
80+
key: 2,
81+
}],
82+
});
83+
});
84+
});
85+
}
86+
87+
render() {
88+
return (
89+
<div>
90+
<button onClick={this.switch}>切换</button>
91+
<button onClick={this.remove}>多次刷空子级</button>
92+
<button onClick={this.exchange}>多次切换同样子级</button>
93+
<QueueAnim type={this.state.type}>
94+
{this.state.items.map((item) => <div key={item.key}>
95+
{item.children} <a href="#" onClick={this.remove.bind(this, item.key)}>删除</a>
96+
</div>)}
97+
</QueueAnim>
98+
</div>
99+
);
100+
}
101+
}
102+
103+
ReactDom.render(<App />, document.getElementById('__react-content'));

package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
{
22
"name": "rc-queue-anim",
3-
"version": "1.4.1",
3+
"version": "1.5.0",
44
"description": "Queue animation component for react",
55
"keywords": [
66
"react",
77
"react-component",
8+
"queue",
89
"react-queue-anim",
910
"queue-anim",
11+
"queue-animte",
12+
"queue-animation",
1013
"animation",
1114
"animate",
1215
"rc-animation",

src/QueueAnim.jsx

+22-10
Original file line numberDiff line numberDiff line change
@@ -89,13 +89,15 @@ class QueueAnim extends React.Component {
8989
componentWillReceiveProps(nextProps) {
9090
const nextChildren = toArrayChildren(nextProps.children).filter(item => item);
9191
let currentChildren = this.originalChildren.filter(item => item);
92-
const emptyBool = !nextChildren.length && !currentChildren.length && this.state.children.length;
93-
if (emptyBool) {
92+
if (this.state.children.length) {
9493
/**
95-
* 多次刷新空子级处理
96-
* 如果 state.children 里还有元素,元素还在动画,当前子级设回 state.children;
94+
* 多次刷新处理
95+
* 如果 state.children 里还有元素,元素还在动画,当前子级加回在出场的子级;
9796
*/
98-
currentChildren = this.state.children;
97+
const leaveChild = this.state.children.filter(item =>
98+
this.keysToLeave.indexOf(item.key) >= 0
99+
);
100+
currentChildren = mergeChildren(currentChildren, leaveChild);
99101
}
100102
const newChildren = mergeChildren(
101103
currentChildren,
@@ -104,14 +106,24 @@ class QueueAnim extends React.Component {
104106

105107
const childrenShow = !newChildren.length ? {} : this.state.childrenShow;
106108
this.keysToEnterPaused = {};
107-
// 在出场没结束时,childrenShow 里的值将不会清除。再触发进场时, childrenShow 里的值是保留着的, 设置了 enterForcedRePlay 将重新播放进场。
109+
const emptyBool = !nextChildren.length
110+
&& !currentChildren.length
111+
&& this.state.children.length;
112+
/**
113+
* 在出场没结束时,childrenShow 里的值将不会清除。
114+
* 再触发进场时, childrenShow 里的值是保留着的, 设置了 enterForcedRePlay 将重新播放进场。
115+
*/
108116
if (!emptyBool) {// 空子级状态下刷新不做处理
117+
const nextKeys = nextChildren.map(c => c.key);
109118
this.keysToLeave.forEach(key => {
110119
// 将所有在出场里的停止掉。避免间隔性出现
111-
this.keysToEnterPaused[key] = true;
112-
if (nextProps.enterForcedRePlay) {
113-
// 清掉所有出场的。
114-
delete childrenShow[key];
120+
if (nextKeys.indexOf(key) >= 0) {
121+
this.keysToEnterPaused[key] = true;
122+
currentChildren = currentChildren.filter(item => item.key !== key);
123+
if (nextProps.enterForcedRePlay) {
124+
// 清掉所有出场的。
125+
delete childrenShow[key];
126+
}
115127
}
116128
});
117129
}

0 commit comments

Comments
 (0)