react component 生命周期

来源：互联网发布：77kjkj域名访问升级中编辑：程序博客网时间：2024/06/05 15:06

过程中涉及三个主要的动作术语：

mounting:表示正在挂接虚拟DOM到真实DOM。updating:表示正在被重新渲染。unmounting:表示正在将虚拟DOM移除真实DOM。

每个动作术语提供两个函数：

    componentWillMount()    componentDidMount()    componentWillUpdate(object nextProps, object nextState)    componentDidUpdate(object prevProps, object prevState)    componentWillUnmount()

<html>  <head>    <title>Document</title>    <script src="../react.js"></script>    <script src="../react-dom.js"></script>    <!-- //引用资源，JSX转HTML -->    <script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>  </head>  <body>    <div id="reactContainer"></div>    <script type="text/babel"> //babel JSX => HTML      const AddCount = React.createClass({        getInitialState: () => {          console.log('1.getInitialState')          return {count:1}        },        componentWillMount: () => console.log('2.componentWillMount'),        componentDidMount: () => console.log('3.componentDidMount'),        componentWillUpdate: () => console.log('4.componentWillUpdate'),        componentDidUpdate: () => console.log('5.componentDidUpdate'),        handleClick: function(event) {          this.setState({count: ++this.state.count})        },        render: function() {          return (            <p>              {this.state.count}<br/>              <button onClick={this.handleClick}>ADD</button>            </p>          )        }      })      ReactDOM.render(        <AddCount/>,        document.getElementById('reactContainer')      )    </script>  </body></html>

阅读全文

1 0