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

    The React component lifecycle will allow you to update your components at runtime. This lesson will explore how to do that.

    Updating: componentWillReceiveProps

    componentWillReceiveProps(object nextProps)

    Invoked when a component is receiving new props. This method is not called for the initial render.

    Use this as an opportunity to react to a prop transition before render() is called by updating the state using this.setState(). The old props can be accessed via this.props. Callingthis.setState() within this function will not trigger an additional render.

    Updating: shouldComponentUpdate

    boolean shouldComponentUpdate(object nextProps, object nextState)

    Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate is used.

    Use this as an opportunity to return false when you're certain that the transition to the new props and state will not require a component update.

    If shouldComponentUpdate returns false, then render() will be completely skipped until the next state change. (In addition, componentWillUpdate and componentDidUpdate will not be called.)

    By default, shouldComponentUpdate always returns true to prevent subtle bugs when stateis mutated in place, but if you are careful to always treat state as immutable and to read only from props and state in render() then you can override shouldComponentUpdate with an implementation that compares the old props and state to their replacements.

    If performance is a bottleneck, especially with dozens or hundreds of components, useshouldComponentUpdate to speed up your app.

    Updating: componentDidUpdate

    componentDidUpdate(object prevProps, object prevState)

    Invoked immediately after the component's updates are flushed to the DOM. This method is not called for the initial render.

    Use this as an opportunity to operate on the DOM when the component has been updated.

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>React Lesson 11: Component Lifecycle: Updating</title>
        <script src="http://fb.me/react-0.8.0.js"></script>
        <script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
        <style>
            body {
                margin: 25px;
            }
        </style>
    </head>
    <body>
    <div id="panel"></div>
    <script type="text/jsx">
        /** @jsx React.DOM */
        var APP =
                React.createClass({
                    getInitialState:function(){
                        return {increasing:false}
                    },
                    update:function(){
                        var newVal = this.props.val+1
                        this.setProps({val:newVal})
                    },
                    componentWillReceiveProps:function(nextProps){
                        //Invoked when a component is receiving new props. This method is not called for the initial render.
                        //So when the counter increase, this method will be called
                        //works for props, not state
                        this.setState({increasing:nextProps.val>this.props.val})
                    },
                    shouldComponentUpdate: function( nextProps,  nextState){
                        /*Invoked before rendering when new props or state are being received. This method is not called for the initial render or when forceUpdate is used.
    
                         Use this as an opportunity to return false when you're certain that the transition to the new props and state will not require a component update.*/
                        console.log(nextProps.val);
                        //Only update every 5 times
                        return nextProps.val % 5 ===0;
                    },
                    render:function(){
                        console.log(this.state.increasing)
                        return  (
                                <button
                                        onClick={this.update}>
                                        {this.props.val}
                                </button>
                        )
                    },
                    componentDidUpdate: function( prevProps,  prevState){
                        console.log("prevProps ===" + JSON.stringify(prevProps));
                    }
                });
    
    
        React.renderComponent(
                <APP val={0} />,
                document.getElementById('panel'))
    
    </script>
    </body>
    </html>

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

  • 相关阅读:
    PHP str_replace() 函数
    PHP str_pad() 函数
    查看带有A-TIME的执行计划
    B. Recursive Queries 打表
    [AHOI2013]作业 莫队 树状数组
    SP1487 PT07J
    SP10628 COT
    洛谷P1494 [国家集训队]小Z的袜子
    [SDOI2013]森林 主席树 启发式合并
    [CQOI2015]任务查询系统 主席树_差分
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4366116.html
Copyright © 2011-2022 走看看