1 // import React from 'react';
2 // import ReactDOM from 'react-dom';
3 // import './index.css';
4 // import App from './App';
5 // import registerServiceWorker from './registerServiceWorker';
6
7 // ReactDOM.render(<App />, document.getElementById('root'));
8 // registerServiceWorker();
9
10
11
12
13
14 import React from 'react'
15 import ReactDOM from 'react-dom';
16 import registerServiceWorker from './registerServiceWorker';
17 class SubCounter extends React.Component {
18 componentWillReceiveProps() {
19 console.log('9、子组件将要接收到新属性');
20 }
21
22 shouldComponentUpdate(newProps, newState) {
23 console.log('10、子组件是否需要更新');
24 if (newProps.number < 5) return true;
25 return false
26 }
27
28 componentWillUpdate() {
29 console.log('11、子组件将要更新');
30 }
31
32 componentDidUpdate() {
33 console.log('13、子组件更新完成');
34 }
35
36 componentWillUnmount() {
37 console.log('14、子组件将卸载');
38 }
39
40 render() {
41 console.log('12、子组件挂载中');
42 return (
43 <p>{this.props.number}</p>
44 )
45 }
46 }
47
48 class Counter extends React.Component {
49 static defaultProps = {
50 //1、加载默认属性
51 name: 'sls',
52 age:23
53 };
54
55 constructor() {
56 super();
57 //2、加载默认状态
58 this.state = {number: 0}
59 }
60
61 componentWillMount() {
62 console.log('3、父组件挂载之前');
63 }
64
65 componentDidMount() {
66 console.log('5、父组件挂载完成');
67 }
68
69 shouldComponentUpdate(newProps, newState) {
70 console.log('6、父组件是否需要更新');
71 if (newState.number<15) return true;
72 return false
73 }
74
75 componentWillUpdate() {
76 console.log('7、父组件将要更新');
77 }
78
79 componentDidUpdate() {
80 console.log('8、父组件更新完成');
81 }
82
83 handleClick = () => {
84 this.setState({
85 number: this.state.number + 1
86 })
87 };
88
89 render() {
90 console.log('4、render(父组件挂载)');
91 return (
92 <div>
93 <p>{this.state.number}</p>
94 <button onClick={this.handleClick}>+</button>
95 {this.state.number<10?<SubCounter number={this.state.number}/>:null}
96 </div>
97 )
98 }
99 }
100 ReactDOM.render(<Counter/>, document.getElementById('root'))
101 registerServiceWorker();
