A.理解
1. 组件从创建到死亡它会经历一些特定的阶段。
2.React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
3. 我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。
B.生命周期流程图（旧）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./"> </head> <body> <div id="test"></div> <script src="./react-resource/react.development.js"></script> <script src="./react-resource/react-dom.development.js"></script> <script src="./react-resource/babel.min.js"></script> <script src="./react-resource/prop-types.js"></script> <script type="text/babel"> class Count extends React.Component{ // 构造器初始化 state={count:0}; constructor(props){ console.log("constructor"); super(props); this.state={count:0}; } // 组件挂载完毕的输出 componentDidMount(){ console.log("componentDidMount"); } add=()=>{ const {count}=this.state; this.setState({count:count+1}); } // 组件将要挂载的钩子 componentWillMount(){ console.log("componentWillMount"); } render(){ console.log("render"); const {count}=this.state; return ( <div> <h2>当前求和为：{count}</h2> <button onClick={this.add}>点我加一</button> </div> ) } } ReactDOM.render(<Count/>,document.getElementById("test")); </script> </body> </html>
