zoukankan      html  css  js  c++  java
  • [React] React Fundamentals: Component Lifecycle

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. This lesson will introduce mounting and unmounting of your React components.

    Mounting: componentWillMount

    Invoked once, both on the client and server, immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.

    Mounting: componentDidMount

    Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).

    If you want to integrate with other JavaScript frameworks, set timers using setTimeout orsetInterval, or send AJAX requests, perform those operations in this method.

    Unmounting: componentWillUnmount

    Invoked immediately before a component is unmounted from the DOM.

    Perform any necessary cleanup in this method, such as invalidating timers or cleaning up any DOM elements that were created in componentDidMount.

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>React Lesson 9: Mounting</title>
    </head>
    <body>
    
    <div id="panel"></div>
    
    <button onClick="Render()">Render</button>
    <button onClick="Unmount()">Unmonut</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
    <script type="text/jsx">
    
        var App = React.createClass({
            getInitialState: function(){
                return {
                    val: 0
                }
            },
            update: function() {
              var newVal = this.state.val + 1;
              this.setState({val: newVal});
            },
            componentWillMount: function() {
                console.log("Will mount");
            },
            componentDidMount: function() {
                console.log("Did mount");
            },
            componentWillUnmount: function() {
                console.log("Byebye");
            },
            render: function(){
                console.log("render");
                return <button onClick={this.update}>{this.state.val}</button>
            }
        });
    
        window.Render = function() {
            React.render(<App />, document.getElementById('panel'));
        }
    
        window.Unmount = function() {
            React.unmountComponentAtNode(document.getElementById('panel'));
        }
    </script>
    </body>
    </html>

    https://facebook.github.io/react/docs/component-specs.html

  • 相关阅读:
    表单数据源控制器笔记
    方法汇总1
    Persistence.beans
    数据库外键理解
    SQL语句缺少
    树型结构需要绑定的字段
    模型绑定替换
    乱码
    表单的验证:客户端验证和服务器端验证
    表单
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4364256.html
Copyright © 2011-2022 走看看