銷毀react組件的方法

本文轉載自查看原文 2017-05-19 16:54 1677 react 組件銷毀事件/ react

文章轉載自：www.qianduanzaixian.com/detail.do?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>

免責聲明！

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

猜您在找 vue 銷毀組件 vue 銷毀組件 react組件，樣式添加的方法 React - 組件傳值以及方法調用 react組件傳值傳方法 react組件間的傳值方法 react 子組件調用父組件方法 React 父組件調用子組件的方法 react 中子組件調用父組件的方法 react父組件調用子組件方法