react初始化階段

最後更新：2016-11-30 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：擷取 get title wol toolbar 狀態參考型別產生多個

初始化階段可以使用的函數：
getDefaultProps:只調用一次，執行個體之間共用引用。只有在組件的第一個執行個體被初始化的時候，才會調用他，然後react會把這個函數的返回結果儲存起來，從第二個執行個體開始，他們的預設屬性都是這同一個結果。執行個體之間共用引用，在js中有兩種類型的資料，一種實值型別，比如字串，布爾值等，一種是參考型別，比如數組，對象等，如果函數返回的是參考型別的資料，那麼react會把引用儲存起來，在建立不同的執行個體的時候，他會使用同一個引用當做屬性，但是我們知道，引用指向的都是同一個地址，所以說不同執行個體之間操作的其實是同一個資料，所以在用這個函數的時候，要注意返回的是引用還是值。

getInitialState:初始化每個執行個體特有的狀態。從這個函數開始，每個執行個體被初始化的時候，都會調用他，不像第一個函數只會調用一次，第一個函數處理的是屬性，第二個函數處理的是狀態，由於狀態是每個執行個體自己內部的資訊，每個執行個體要維護自己狀態，所以不同的執行個體有不同的狀態，那麼都需要調用這個函數。

componentWillMount:render之前最後一次修改狀態的機會。在這個時候，你還是可以修改狀態的，但是在render裡面就不可以在修改狀態了。

render：只能訪問this.props和this.state,只有一個頂層組件，不允許修改狀態和dom輸出。this.props和this.state是render特有的兩個資料來源，除此以外，你不應該在擷取其他的資料資訊。只有一個頂層組件？render的傳回值只能是一個組件，這個組件可以包含很多的子組件，也可以包含很多的子代碼，但是本質上他還是一個組件，你不能返回一個數組。不允許修改狀態和dom輸出。如果一定要修改，也是可以的，但是react不推薦這麼做，如果你修改了狀態和輸出的話，那麼render函數就無法再服務端進行使用，當然我們大部分時候是在用戶端使用的render函數，如果你想提高網站的載入效能，就可以在服務端進行處理，但是你的render函數需要修改狀態和dom輸出，在服務端得時候是沒有這樣的環境的，所以你如果修改了狀態和輸出，就只能在瀏覽器使用了，這回大大的限制你的系統效能。第二個原因就是你如果在render裡面修改了狀態和輸出，會導致代碼的邏輯變得非常的複雜，很難經過狀態分析出結果，react設計目的之一就是讓組件的邏輯變得清晰簡單，這樣就違背了這樣的目的。你自己還是別人就很難看懂這段代碼。

componentDidMount:成功render並渲染完成真實dom之後觸發，可以修改dom。這個函數被調用的時候，dom已經被建立。

執行個體：查看觸發順序。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>測試</title></head><body>    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>    <script type="text/jsx">        var style={           color:"red",           border:"1px solid #f99",           width:"200px",           height:"50px"        };        var HelloWorld=React.createClass({           getDefaultProps: function(){           console.log("getDefaultProps,1")           },           getInitialState: function(){              console.log("getInitialState,2");              return null;           },           componentWillMount: function(){              console.log("componentWillMount,3")           },           render: function(){               console.log("render,4")               return <p ref="childp">hello,{(                  function(obj){                  if(obj.props.name)                    return obj.props.name                   else                    return "world"                  }               )(this)}</p>           },           componentDidMount:function(){               console.log("componentDidMount,5");           },        });        React.render(<div style={style}>HelloWorld</div>,document.body)    </script></body></html>

注意上面代碼中紅色的標記部分，我們只是輸出的字串HelloWorld，並不是標籤<HelloWorld></Helloworld>，所以此時的控制台和輸出是這樣。

我們可以看出，getDefaultProps在實際的使用中，是直接調用的，也就是在React.createClass之後，就會被調用並把結果儲存起來，及時你沒有產生執行個體，這個函數也會被調用，react這麼做主要目的就是為了提高效能，儘可能早的將我們要做的事情處理好，這樣當我們要使用HelloWorld執行個體的時候，就會省掉調用這個函數的時間從而提高效能。我們改一下代碼，讓其正確輸出。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>測試</title></head><body>    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>    <script type="text/jsx">        var style={           color:"red",           border:"1px solid #f99",           width:"200px",           height:"50px"        };        var HelloWorld=React.createClass({           getDefaultProps: function(){           console.log("getDefaultProps,1")           },           getInitialState: function(){              console.log("getInitialState,2");              return null;           },           componentWillMount: function(){              console.log("componentWillMount,3")           },           render: function(){               console.log("render,4")               return <p ref="childp">hello,{(                  function(obj){                  if(obj.props.name)                    return obj.props.name                   else                    return "world"                  }               )(this)}</p>           },           componentDidMount:function(){               console.log("componentDidMount,5");           },        });        React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body)    </script></body></html>

各個執行個體的正確用法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>測試</title></head><body>    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>    <script type="text/jsx">       $(document).ready(          function(){             var count=0;             var style={                color:"red",                border:"1px solid #090",             };             var HelloWorld=React.createClass({                getDefaultProps:function(){                    console.log("getDefaultProps,1");                    return{name:"Tom"};                },                getInitialState:function(){                    console.log("getInitialState,2");                    return{                    myCount:count++,                    ready:false                    };                },                componentWillMount:function(){                    console.log("componentWillMount,3");                    this.setState({ready:true});                },                render:function(){                     console.log("render,4");                     return <p ref="childp">Hello,{                         this.props.name ? this.props.name : "World"                     }<br/>{""+this.state.ready}</p>;                },                componentDidMount:function(){                     console.log("componentDidMount,5");                     //這裡才可以操作dom                     $(React.findDOMNode(this)).append("surprise!");                },                //HelloWolrld內部             });             React.render(<div style={style}><HelloWorld></HelloWorld></div>,document.body)                 //function 內部                   }          //ready內部       )    </script></body></html>

輸出count，產生多個HelloWorld

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>測試</title></head><body>    <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/react.min.js"></script>    <script type="text/javascript" src="http://cdn.bootcss.com/react/0.13.2/JSXTransformer.js"></script>    <script type="text/jsx">       $(document).ready(          function(){             var count=0;             var style={                color:"red",                border:"1px solid #090",             };             var HelloWorld=React.createClass({                getDefaultProps:function(){                    console.log("getDefaultProps,1");                    return{name:"Tom"};                },                getInitialState:function(){                    console.log("getInitialState,2");                    return{                    myCount:count++,                    ready:false                    };                },                componentWillMount:function(){                    console.log("componentWillMount,3");                    this.setState({ready:true});                },                render:function(){                     console.log("render,4");                     return <p ref="childp">Hello,{                         this.props.name ? this.props.name : "World"                     }<br/>{""+this.state.ready}{this.state.myCount}</p>;                },                componentDidMount:function(){                     console.log("componentDidMount,5");                     $(React.findDOMNode(this)).append("surprise!");                },                //HelloWolrld內部             });             React.render(<div style={style}><HelloWorld></HelloWorld><br/><HelloWorld></HelloWorld></div>                 ,document.body)                 //function 內部                   }          //ready內部       )    </script></body></html>

react初始化階段

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More