<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                ### 什么是生命周期? 組件本子上是狀態機,輸入確定,輸出一定確定。? 狀態發生轉換時會觸發不同的鉤子函數,從而讓開發者有機會做出響應? 可以用事件的思路來理解狀態。組件可以處于不同的狀態中。? 初始化階段————運行中階段————銷毀階段? 初始化階段能夠使用的鉤子函數(按照觸發順序):? getDefaultProps(獲取實例的默認屬性)————只有第一次實例的時候調用? getInitialState(獲取實例的初始狀態)? componentWillMount(組件即將被渲染到頁面)? render(組件在render中生成虛擬的DOM節點,即JSX,最后由React生成真實的DOM節點)? componentDidMount(組件被渲染到頁面之后)? 運行中階段能夠使用的鉤子函數(按照觸發順序):? componentWillReceiveProps(組件快要接收到屬性時觸發)? shouldComponentUpdate(組件接收到新狀態時,是否需要更新,返回false,React就不會更新,可以提高性能)? componentWillUpdate()? render? componentDidUpdate(在組件被渲染到頁面之后調用)? 銷毀中階段能夠使用的鉤子函數(按照觸發順序):? componentWillUnmount(在銷毀操作執行之前觸發) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="關鍵詞一,關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content="劉艷"> <title></title> </head> <body> <div id = "example"></div> </body> </html> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="build/browser.min.js"></script> <script type="text/babel"> var HelloMessage = React.createClass({ getDefaultProps: function () { }, getInitialState: function(){ return {liked: false} }, componentWillMount: function(){ console.log("Component will mount"); }, render: function(){ return <p ref = "one">Hello, { (function(obj){ if(obj.props.name){ return obj.props.name; }else{ return "Message" } })(this)}</p> }, compontentDidMount: function(){} }); ReactDOM.render(<HelloMessage></HelloMessage>, document.querySelector("#example")); </script> ~~~ ### 初始化階段介紹 getDefaultProps——只調用一次,實例之間共享引用(屬性)? 即使沒有生成實例,也會調用,在createClass時,就會被調用? getInitialState——初始化每個實例特有的狀態? 必須返回一個Object或者是Null? componentWillMount——render之前最后一次修改狀態的機會? render——只能訪問this.props和this.state,不應再訪問其它信息,只有一個頂層組件,但是可以有子組件,不允許修改狀態和DOM輸出。? 如果render需要修改狀態和DOM輸出,那么render就不能在服務端使用。并且,如果在render中修改狀態和DOM輸出,會使得代碼邏輯變得復雜。所以,要盡可能避免這樣做。? componentDidMount——成功render并渲染完成真實DOM之后觸發,可以修改DOM 操作真正的DOM節點:this.refs.XXX ~~~ var Zoo = React.createClass({ render: function() { return <div>Giraffe name: <input ref="giraffe" /></div>; }, showName: function() { // 之前: var input = this.refs.giraffe.getDOMNode(); // v0.14 版: var input = this.refs.giraffe; alert(input.value); } }); ~~~ 需要注意的是,如果你給自定義的 React 組件(除了 DOM 自帶的標簽,如 div、p 等)添加 refs,表現和行為與之前一致。 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="關鍵詞一,關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content="劉艷"> <title></title> </head> <body> <div id = "example"></div> </body> </html> <script src="build/jquery-1.11.2.min.js"></script> <script src = "build/react.js"></script> <script src = "build/react-dom.js"></script> <script src = "build/browser.min.js"></script> <script type = "text/babel"> var count = 0; var HelloMessage = React.createClass({ getDefaultProps: function () { return {name: "Yvette"}; }, getInitialState: function(){ return {myCount: count++, ready: false} }, componentWillMount: function(){ this.setState({ready: true}) }, render: function(){ return <p ref = "one">Hello, {this.props.name ? this.props.name : "Message"} <br/> {+ this.state.ready}&nbsp;{this.state.myCount}</p> }, componentDidMount: function(){ $(this.refs.one).append("<span>future</span>"); } }); ReactDOM.render(<div><HelloMessage></HelloMessage><HelloMessage></HelloMessage></div>, document.querySelector("#example")); </script> ~~~ ![](https://box.kancloud.cn/2016-04-07_5706040049a94.jpg) ### 運行中階段介紹 componentWillReceiveProps:父組件修改屬性觸發,可以修改新屬性、修改狀態。? 在修改發生之前出發。在屬性真正比傳送到組件之前,對其進行處理。? shouldComponentUpdate:返回false會阻止render調用,后面的函數都不會執行。? componentWillUpdate:不能修改屬性和狀態? render:只能訪問this.props和this.state,不應再訪問其它信息,只有一個頂層組件,但是可以有子組件,不允許修改狀態和DOM輸出。? componentDidUpdate:可以修改DOM ### 銷毀階段介紹 componentWillUnmount:在組件真正被銷毀前調用,在刪除組件之前進行清理操作,如計時器和事件監聽器。 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="關鍵詞一,關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content="劉艷"> <title></title> </head> <body> <div id = "example"></div> </body> </html> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="build/browser.min.js"></script> <script type="text/babel"> var style = { color: "red", border: "1px solid #000" }; var HelloWorld = React.createClass({ render: function(){ return <p>Hello, {this.props.name ? this.props.name : "World"}</p>; }, componentWillUnmount: function(){ console.log("I will unmount"); } }); var HelloUniverse = React.createClass({ getInitialState: function(){ return {name: "Yvette"}; }, handleChange: function (event) { if(event.target.value == "123"){ React.unmountComponentAtNode(document.querySelector("#example")) return; } this.setState({name: event.target.value}); }, render: function(){ return( <div> <HelloWorld name = {this.state.name}></HelloWorld> <br/> <input type = "text" onChange = {this.handleChange} /> </div> ); } }); ReactDOM.render(<div style = {style}><HelloUniverse></HelloUniverse></div>,document.querySelector("#example")); </script> ~~~ 在input中輸入123,可以觸發componentWillUnmount事件。? 使用React.unmountComponentAtNode(para);//傳入的參數必須是裝載時的節點,即ReactDOM.render()的第二個參數。? 除了上面的方法外,還可以在render中寫判斷,如下: ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Keywords" content="關鍵詞一,關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content="劉艷"> <title></title> </head> <body> <div id = "example"></div> </body> </html> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="build/browser.min.js"></script> <script type="text/babel"> var style = { color: "red", border: "1px solid #000" }; var HelloWorld = React.createClass({ render: function(){ return <p>Hello, {this.props.name ? this.props.name : "World"}</p>; }, componentWillUnmount: function(){ console.log("I will unmount"); } }); var HelloUniverse = React.createClass({ getInitialState: function(){ return {name: "Yvette"}; }, handleChange: function (event) { this.setState({name: event.target.value}); }, render: function(){ if(this.state.name == "123"){ return <div>123</div> } return( <div> <HelloWorld name = {this.state.name}></HelloWorld> <br/> <input type = "text" onChange = {this.handleChange} /> </div> ); } }); ReactDOM.render(<div style = {style}><HelloUniverse></HelloUniverse></div>,document.querySelector("#example")); </script> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看