react運行階段

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

上載者：User

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

標籤：順序英文 head set get .com form ready tle

運行中可以使用的函數
componentWillReceiveProps:父組件修改屬性觸發，可以修改新屬性，修改狀態。字面意思，組件將要接收屬性，這個函數觸發的時機就是組件的屬性將要發生改變的時候，但是需要注意的是，他是在組件將要改變之前觸發，比如說父組件修改了子組件的屬性，那麼在修改真正發生之前，會觸發這個函數，也就說，給開發人員一個機會去處理這個屬性，開發人員可以對比新屬性和舊屬性，並修改屬性和狀態，這樣，我們就可以在屬性真正的被傳送到組件之前，對他進行處理，有可能對應的更改一些狀態，有可能是修改屬性本身。

shouldComponentUpdate:返回false會阻止render調用。英文意思是組件是否需要更新，也就是react會詢問開發人員，組件是否需要更新，有的時候，狀態發生變化，組件可能不需要更新，只是更新一些資料，不需要更新顯示出來的內容，這個時候，就需要這個函數返回false，運行中後面的三個函數都是和render相關的，如果這個函數返回傳false，就會直接中斷這個流程，後面的三個函數，都不會執行。這裡要注意，大部分時候，我們是不需要使用這個函數的，只有在你真正的找到項目的瓶頸之後，再根據需要去修改，因為對這個函數使用不當的話會導致很多無法預料的問題。

componentWillUpdate:不能修改屬性和狀態。是在render之前執行

render：只能訪問this.props和this.state,只有一個頂層組件，不允許修改狀態和dom輸出。

componentDidUpdate：可以修改dom

運行中觸發順序。
這個例子是input輸入什麼，頁面內容就會變成hello什麼，出事是hello World

<!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({            componentWillReceiveProps:function(){},            shouldComponentUpdate:function(){return true;},//得返回一個true，否則報錯            componentWillUpdate:function(){},            render:function(){                return <p>Hello,{this.props.name ? this.props.name : "World"}</p>;            },            componentDidUpdate:function(){},        });        var HelloUniverse=React.createClass({            getInitialState:function(){                return {name:""};            },            handleChange:function(event){                //用來響應input的輸入事件                this.setState({name:event.target.value});            },            render:function(){                return <div>                <HelloWorld name={this.state.name                    //這裡引用了HelloWorld的組件，所以HelloUniverse是他的子組件                }></HelloWorld>                <br />                <input type="text" onChange={this.handleChange} />                  </div>            },        });        React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body)        // 寫為React.render(<div style={style}><HelloWord></HelloWorld></div>,document.body)看看效果    </script></body></html>

改一下代碼，查看輸出屬性的順序。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>測試觸發順序，不輸入不會觸發五個函數，只會觸發render</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({            componentWillReceiveProps:function(){                console.log("componentWillReceiveProps,1");            },            shouldComponentUpdate:function(){                console.log("shouldComponentUpdate,2");                return true;            },//得返回一個true，否則報錯            componentWillUpdate:function(){                console.log("componentWillUpdate,3");            },            render:function(){                console.log("render,4");                return <p>Hello,{this.props.name ? this.props.name : "World"}</p>;            },            componentDidUpdate:function(){                console.log("componentDidUpdate,5");            },        });        var HelloUniverse=React.createClass({            getInitialState:function(){                return {name:""};            },            handleChange:function(event){                //用來響應input的輸入事件                this.setState({name:event.target.value});            },            render:function(){                return <div>                <HelloWorld name={this.state.name                    //這裡引用了HelloWorld的組件，所以HelloUniverse是他的子組件                }></HelloWorld>                <br />                <input type="text" onChange={this.handleChange} />                  </div>            },        });        React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body)        // 寫為React.render(<div style={style}><HelloWord></HelloWorld></div>,document.body)看看效果    </script></body></html>

沒有輸入內容的時候，只會觸發render，

每輸入一次內容，就會觸發一次。

<!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 style={           color:"red",           border:"1px solid #f99",           width:"200px",           height:"50px"        };        var HelloWorld= React.createClass({            componentWillReceiveProps:function(newProps){                console.log("componentWillReceiveProps,1");                console.log(newProps);            },            shouldComponentUpdate:function(){                console.log("shouldComponentUpdate,2");                return true;            },//得返回一個true，否則報錯            componentWillUpdate:function(){                console.log("componentWillUpdate,3");            },            render:function(){                console.log("render,4");                return <p>Hello,{this.props.name ? this.props.name : "World"}</p>;            },            componentDidUpdate:function(){                console.log("componentDidUpdate,5");            },        });        var HelloUniverse=React.createClass({            getInitialState:function(){                return {name:""};            },            handleChange:function(event){                //用來響應input的輸入事件                this.setState({name:event.target.value});            },            render:function(){                return <div>                <HelloWorld name={this.state.name                    //這裡引用了HelloWorld的組件，所以HelloUniverse是他的子組件                }></HelloWorld>                <br />                <input type="text" onChange={this.handleChange} />                  </div>            },        });        React.render(<div style={style}><HelloUniverse></HelloUniverse></div>,document.body)        // 寫為React.render(<div style={style}><HelloWord></HelloWorld></div>,document.body)看看效果    })    </script></body></html>

查看一下輸出，這裡輸出了一個object

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