/*
1.初始化阶段:由ReactDOM.render()触发（初次渲染的时候）
1.construtor()
2.conponentWillMount()
3.render()
4.componentDidMount()
2.由组件内部this.setState()或父组件render触发
1.shouldComponentUpdate()
2.componentWillUpdate()
3.render()
4.compontentDidUpdate()
3.卸载组件：由ReactDOM.unmountConponentAtNode()触发
1.componentWillUnmount()
*/
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
9
10 <!-- 该文件向外暴露了一个对象 React-Dom -->
11 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
12 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
13 <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
14
15 </head>
16
17 <body>
18
19 <div id="app"></div>
20 <script type="text/babel">
21 class Father extends React.Component{
22 constructor(props){
23 super(props)
24 console.log('constructor')
25 }
26 state = { relation:'爸爸'};
27 render(){
28 return(
29 <div>
30 <h1>{this.state.relation}</h1>
31 <button onClick={this.changeRelation} >修改关系</button>
32 <button onClick = {this.destoryComponent}>销毁组件</button>
33 <Son relation={this.state.relation} />
34 </div>
35 )
36 }
37 destoryComponent = () =>{
38 ReactDOM.unmountComponentAtNode(document.getElementById("app"))
39 }
40 componentWillMount(){
41 console.log("componentWillMount")
42 }
43 componentDidMount(){
44 console.log("componentDidMount")
45 }
46 shouldComponentUpdate(){
47 console.log("shouldComponentUpdate")
48 return true;
49 }
50 componentWillUpdate(){
51 console.log("componentWillUpdate")
52 }
53 componentDidUpdate(){
54 console.log("componentDidUpdate")
55 }
56 componentWillUnmount(){
57 console.log("componentWillUnmount")
58 }
59 changeRelation = ()=>{
60 const {relation} = this.state
61 this.setState({relation:"儿子"})
62 }
63 }
64 class Son extends React.Component{
65 render(){
66 return(
67 <div>
68 <h1>我是你：{this.props.relation}</h1>
69 </div>
70 )
71 }
72 componentWillReceiveProps(){
73 console.log("componentWillReceiveProps")
74 }
75 }
76 ReactDOM.render(<Father />,document.getElementById("app"))
77 </script>
78 </body>
79
80 </html>