1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Document</title>
7 <!-- 1、包引入 -->
8 <script src="node_modules/react/umd/react.development.js"></script>
9 <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
10 <script src="node_modules/babel-standalone/babel.js"></script>
11 </head>
12 <body>
13 <div id="demodiv"></div>
14 <script type="text/babel">
15 class MyCom extends React.Component{
16 constructor(props){
17 super(props)
18 console.log("听说这里是初始化")
19 this.state={
20 name:"么么哒"
21 }
22 }
23 componentWillMount(){
24 console.log("WMount")
25 }
26
27
28 componentDidMount() {
29 console.log("cdm")
30 }
31
32
33 componentWillUpdate(nextProps, nextState) {
34 console.log("cwup")
35 console.log(nextProps,nextState)
36 }
37
38 componentDidUpdate(prevProps, prevState) {
39 console.log("cdu")
40 console.log(prevProps,prevState)
41 }
42
43
44 fun=()=>{
45 this.setState({
46 name:"改了"
47 })
48 }
49
50
51 render(){
52 return(
53 <div>
54 <h1>生命周期----{this.state.name}</h1>
55 <button onClick={this.fun}>点我修改</button>
56 </div>
57 )
58 }
59 }
60
61
62 ReactDOM.render(<MyCom/>, document.querySelector("#demodiv"));
63 </script>
64 </body>
65 </html>