最近突然來了興緻研究react，在研究react的JSX語法，組件時，覺得沒有什麼問題，都挺好理解的，但是看到生命周期這一部分時，發現官網給出的聲明周期事件有一個怎麼都不能主動觸發到，後來在網上查了查，網上都只給出了聲明周期的概念，沒有人去真正測試過如何觸發React組件的銷毀。 於是只能自己動手， ...
文章轉載自：www.qianduanzaixian.com/detail.dp?id=73
最近突然來了興緻研究react，在研究react的JSX語法，組件時，覺得沒有什麼問題，都挺好理解的，但是看到生命周期這一部分時，發現官網給出的聲明周期事件有一個怎麼都不能主動觸發到，後來在網上查了查，網上都只給出了聲明周期的概念，沒有人去真正測試過如何觸發React組件的銷毀。
於是只能自己動手，分析React對象和ReactDom對象，經過不停測試，終於讓我發現主動銷毀組件的方法了，如下：
ReactDOM.unmountComponentAtNode(document.getElementById("example"));
註：example是該實例的根節點。
下麵是完整代碼示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>Hello React</title> <script src="/react/system/lib/react/react.min.js"></script> <script src="/react/system/lib/react/react-dom.min.js"></script> <script src="/react/system/lib/react/browser.min.js"></script> </head> <body> <div id="example"></div> <!-- 腳本類型babel,聲明代碼里有jsx語法，交由瀏覽器的browser去解析 --> <script type="text/babel"> var Button = React.createClass({ getInitialState: function() { return { data:'msg' }; }, setNewNumber: function() { this.setState({data: ''}) }, render: function () { return ( <div> <button onClick = {this.setNewNumber}>INCREMENT</button> <Content myNumber = {this.state.data} ref="content"></Content> </div> ); }, componentWillUnmount:function() { console.log('111Component WILL UNMOUNT!') } }); var Content = React.createClass({ componentWillMount:function() { console.log('Component WILL MOUNT!') }, componentDidMount:function() { console.log('Component DID MOUNT!') }, componentWillReceiveProps:function(newProps) { console.log('Component WILL RECEIVE PROPS!') }, shouldComponentUpdate:function(newProps, newState) { return true; }, componentWillUpdate:function(nextProps, nextState) { console.log('Component WILL UPDATE!'); }, componentDidUpdate:function(prevProps, prevState) { console.log('Component DID UPDATE!') }, componentWillUnmount:function() { console.log('Component WILL UNMOUNT!') }, render: function () { return ( <div> <h3>{this.props.myNumber}</h3> </div> ); } }); var aa = ReactDOM.render( <div> <Button /> </div>, document.getElementById('example') ); /** ** 在控制台執行下麵語句即可看到組件銷毀事件被觸發了 ** ReactDOM.unmountComponentAtNode(document.getElementById("example")); **/ </script> </body> </html>
