[React] React Fundamentals: Component Lifecycle - Mounting Basics

最新推荐文章于 2024-06-10 22:18:41 发布

weixin_30411239

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量48

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/4364256.html

版权

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

转载于:https://www.cnblogs.com/Answer1215/p/4364256.html

weixin_30411239

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[React] React Fundamentals: Component Lifecycle - Mounting Basics

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: componentW...
复制链接

扫一扫