forked from RubyLouvre/anu
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex10.html
125 lines (109 loc) · 2.94 KB
/
index10.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type='text/javascript' src="./dist/React.js"></script>
<!-- <script type='text/javascript' src="./react.js"></script>
<script type='text/javascript' src="./react-dom.js"></script>-->
<script type='text/javascript' src="./lib/ReactTestUtils.js"></script>
<script type='text/javascript' src="./lib/babel.js"></script>
</head>
<body>
<div id='root' class="root">
</div>
<script type='text/babel'>
var container = document.getElementById('root');
var div = container;
if (!window.ReactDOM) {
window.ReactDOM = React;
}
var expect = function(a) {
return {
toBe: function(b) {
console.log(a, 'vs', b, a === b);
},
toEqual(b) {
console.log(a, 'vs', b, a + '' === b + '');
}
};
};
function prev(el){
return el.previousSibling || {}
}
var div = document.createElement("div")
class InnerBox extends React.PureComponent {
state = {
current: 0,
}
componentDidMount() {
console.log('InnerBox render');
setTimeout(() => {
console.log('current跟上次不一样)');
this.setState({ current: 1 }, ()=>{
expect(prev(this.refs.aaa).id).toBe("a2")
});
}, 50);
setTimeout(() => {
console.log('current跟上次一样，dom位置互换');
this.setState({ current: 1 }, ()=>{
expect(prev(this.refs.aaa).id).toBe("a2")
});
}, 100);
setTimeout(() => {
console.log('current跟上次不一样，dom位置复原');
this.setState({ current: 2 }, ()=>{
expect(prev(this.refs.aaa).id).toBe("a2")
});
}, 150);
setTimeout(() => {
console.log('current跟上次一样，dom位置互换');
this.setState({ current: 2 }, ()=>{
expect(prev(this.refs.aaa).id).toBe("a2")
});
}, 200);
}
render() {
console.log('inner render trigger');
return (
<div id="a3" ref="aaa">
<div style={{ height: 100 }}>内部组件{this.state.current}</div>
</div>
);
}
};
class WrapBox extends React.PureComponent {
state = {
value: 1,
}
componentDidMount() {
console.log('WrapBox render');
// 此处如果在组件创建以后，再次setState，会导致dom位置错误的现象发生
setTimeout(() => {
console.log('父容器state值改变');
this.setState({
value: 1,
});
}, 70);
}
render() {
console.log('wrap render trigger');
return (
<quoteblock>
<div id="a1">标题区域1</div>
<div id="a2">标题区域2</div>
<InnerBox />
<div id="a4">标题区域3</div>
</quoteblock>
);
}
}
ReactDOM.render(
<div>
<WrapBox />
<div>hello anu!</div>
</div>,
div
);
</script>
</html>