React 生命周期介绍
[组件生命周期]
一、理论
组件本质上是状态机，输入确定，输出一定确定
生命周期的三个阶段，三者时间是不固定的，只是在逻辑上的分类：
二、初始化阶段：
getDefaultProps:获取实例的默认属性(即使没有生成实例，组件的第一个实例被初始化CreateClass的时候调用，只调用一次,)
getInitialState:获取每个实例的初始化状态（每个实例自己维护）
componentWillMount：组件即将被装载、渲染到页面上（render之前最好一次修改状态的机会）
render:组件在这里生成虚拟的DOM节点（只能访问this.props和this.state；只有一个顶层组件，也就是说render返回值值职能是一个组件；不允许修改状态和DOM输出）
componentDidMount:组件真正在被装载之后，可以修改DOM
三、运行中状态：
componentWillReceiveProps:组件将要接收到属性的时候调用（赶在父组件修改真正发生之前,可以修改属性和状态）
shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，阻止render调用，后面的函数不会被继续执行了）
componentWillUpdate:不能修改属性和状态
render:只能访问this.props和this.state；只有一个顶层组件，也就是说render返回值只能是一个组件；不允许修改状态和DOM输出
componentDidUpdate:可以修改DOM
四、销毁阶段：
componentWillUnmount:开发者需要来销毁（组件真正删除之前调用，比如计时器和事件监听器）
五、demo查看：
5.1 简单查看组件的初始化阶段的各个方法
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv='Content-type' content='text/html; charset=utf-8'> 5 <title>daomul's example</title> 6 <link rel="stylesheet" href="../shared/css/base.css" /> 7 </head> 8 <body> 9 <h1>Text demo</h1> 10 <div id="container"> 11 12 </div> 13 14 <script src="../shared/thirdparty/es5-shim.min.js"></script> 15 <script src="../shared/thirdparty/es5-sham.min.js"></script> 16 <script src="../shared/thirdparty/console-polyfill.js"></script> 17 <script src="../../build/react.js"></script> 18 <script src="../../build/JSXTransformer.js"></script> 19 <script type="text/jsx"> 20 21 var style = { 22 color : "red", 23 border : "1px #000 solid", 24 }; 25 26 var TextClass = React.createClass({ 27 getDefaultProps:function(){ 28 console.log("getDefaultProps,1"); 29 }, 30 getInitialState:function(){ 31 console.log("getInitialState,2"); 32 return null; 33 }, 34 componentWillMount:function(){ 35 console.log("componmentWillMount,3"); 36 }, 37 render:function(){ 38 console.log("render,4"); 39 return <p ref = "childp">Hello{(function (obj){ 40 if (obj.props.name) 41 return obj.props.name 42 else 43 return "World" 44 })(this)} </p>; 45 }, 46 componentDidMount:function(){ 47 console.log("componmentDidMount,5"); 48 }, 49 }); 50 51 React.render(<div style = {style}> <TextClass></TextClass> </div>,document.body); 52 53 </script> 54 </body> 55 </html>
5.2 运行阶段的函数
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv='Content-type' content='text/html; charset=utf-8'> 5 <title>daomul's example</title> 6 <link rel="stylesheet" href="../shared/css/base.css" /> 7 </head> 8 <body> 9 <h1>Text demo</h1> 10 <div id="container"> 11 12 </div> 13 14 <script src="../shared/thirdparty/es5-shim.min.js"></script> 15 <script src="../shared/thirdparty/es5-sham.min.js"></script> 16 <script src="../shared/thirdparty/console-polyfill.js"></script> 17 <script src="../../build/react.js"></script> 18 <script src="../../build/JSXTransformer.js"></script> 19 <script type="text/jsx"> 20 21 var style = { 22 color : "red", 23 border : "1px #000 solid", 24 }; 25 26 var TextClass = React.createClass({ 27 componentWillReceiveProps:function(newProps){ 28 console.log("componentWillReciveProps,1"); 29 console.log(newProps); 30 }, 31 shouldComponentUpdate:function(){ 32 console.log("shouldComponentUdate,2");return true; 33 }, 34 componentWillUpdate:function(){ 35 console.log("componentWillUpdate,3"); 36 }, 37 render:function(){ 38 console.log("render,4"); 39 return <p>hello:{this.props.name ? this.props.name : "world!"}</p>; 40 }, 41 componentDidUpdate:function(){ 42 console.log("componentDidUpadate,5"); 43 }, 44 }); 45 var TextSourceClass = React.createClass({ 46 getInitialState:function(){ 47 return {name :''}; 48 }, 49 handleChange:function(event){ 50 this.setState({name : event.target.value}); 51 }, 52 render:function(){ 53 return <div> 54 <TextClass name = {this.state.name}></TextClass> 55 <br/><input type="text"onChange = {this.handleChange}/> 56 </div>; 57 }, 58 }); 59 60 React.render(<div style = {style}> <TextSourceClass></TextSourceClass> </div>,document.body); 61 62 </script> 63 </body> 64 </html>
5.3 销毁阶段
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv='Content-type' content='text/html; charset=utf-8'> 5 <title>daomul's example</title> 6 <link rel="stylesheet" href="../shared/css/base.css" /> 7 </head> 8 <body> 9 <h1>Text demo</h1> 10 <div id="container"> 11 12 </div> 13 14 <script src="../shared/thirdparty/es5-shim.min.js"></script> 15 <script src="../shared/thirdparty/es5-sham.min.js"></script> 16 <script src="../shared/thirdparty/console-polyfill.js"></script> 17 <script src="../../build/react.js"></script> 18 <script src="../../build/JSXTransformer.js"></script> 19 <script type="text/jsx"> 20 21 var style = { 22 color : "red", 23 border : "1px #000 solid", 24 }; 25 26 var TextClass = React.createClass({ 27 28 render:function(){ 29 console.log("render,4"); 30 return <p>hello:{this.props.name ? this.props.name : "world!"}</p>; 31 }, 32 componentDidUpdate:function(){ 33 console.log("componentDidUpadate,5"); 34 }, 35 }); 36 var TextSourceClass = React.createClass({ 37 getInitialState:function(){ 38 return {name :''}; 39 }, 40 handleChange:function(event){ 41 this.setState({name : event.target.value}); 42 }, 43 render:function(){ 44 if(this.state.name == "1"){ 45 return <div>123</div>; 46 } 47 return <div> 48 <TextClass name = {this.state.name}></TextClass> 49 <br/><input type="text"onChange = {this.handleChange}/> 50 </div>; 51 }, 52 }); 53 54 React.render(<div style = {style}> <TextSourceClass></TextSourceClass> </div>,document.body); 55 56 </script> 57 </body> 58 </html>
