1

React生命周期 

 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>

 

posted @ 2021-01-21 20:56  small_zhouzhou  阅读(82)  评论(0)    收藏  举报
TOP