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>
以上是 React 生命周期介绍 的全部内容， 来源链接： utcz.com/z/383365.html
