/
New.js
executable file
·89 lines (78 loc) · 2.41 KB
/
New.js
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
/* eslint arrow-body-style: 0, max-classes-per-file: 0, no-unused-vars: [1, { "args": "none" }] */
import React, { Component } from 'react';
import { traceLifecycle } from 'react-lifecycle-visualizer';
import SimpleButton from '../components/SimpleButton';
import LabeledCheckbox from '../components/LabeledCheckbox';
import Tagged from '../components/Tagged';
@traceLifecycle
export default class Parent extends Component {
state = {
showLastChild: true,
x: 42
}
onCheckboxChange = (evt) => {
this.setState({
showLastChild: evt.currentTarget.checked
});
}
incX = () => {
this.props.trace('Custom message, calling incX');
this.setState(({x}) => {
return {x: x + 1};
});
}
render() {
return (
<Tagged name='Parent'>
<div>state = {JSON.stringify(this.state)}</div>
<div className='controls'>
<SimpleButton value='forceUpdate' onClick={() => this.forceUpdate()}/>
<SimpleButton value='inc x' onClick={this.incX}/>
<LabeledCheckbox
label='showLastChild'
checked={this.state.showLastChild}
onChange={this.onCheckboxChange}
/>
</div>
<this.props.LifecyclePanel/>
<Child incX={this.incX} x={this.state.x}/>
{ this.state.showLastChild &&
<Child incX={this.incX} x={this.state.x}/> }
</Tagged>
);
}
}
@traceLifecycle
class Child extends Component {
state = {
y: 1
}
incY = () => {
this.setState((prevState) => {
return {y: prevState.y + 1};
});
}
static getDerivedStateFromProps(nextProps, prevState) {
nextProps.trace('nextProps: ' + JSON.stringify(nextProps));
return {squaredX: nextProps.x ** 2};
}
getSnapshotBeforeUpdate(prevProps, prevState) {
return null;
}
componentDidUpdate(prevProps, prevState) {
}
render() {
return (
<Tagged name='Child' showProps={{x: this.props.x}}>
<div>state = {JSON.stringify(this.state)}</div>
<div className='controls'>
<SimpleButton value='forceUpdate' onClick={() => this.forceUpdate()}/>
<SimpleButton value='inc x' onClick={() => this.props.incX()}/>
<SimpleButton value='inc y' onClick={() => this.incY()}/>
<SimpleButton value='inc x & y' onClick={() => { this.incY(); this.props.incX(); }}/>
</div>
<this.props.LifecyclePanel/>
</Tagged>
);
}
}