React 生命周期介紹

本文轉載自查看原文 2015-10-06 01:26 13074 ReactJS

[組件生命周期]

一、理論

　　組件本質上是狀態機，輸入確定，輸出一定確定

　　生命周期的三個階段，三者時間是不固定的，只是在邏輯上的分類：

二、初始化階段：

　　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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 react 生命周期函數介紹 React生命周期 react的生命周期 React生命周期 React 生命周期 react生命周期 React組件詳細介紹及其生命周期函數 React 新版生命周期 React組件的生命周期 react之組件生命周期