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

  • 相关阅读:
    从 MVC 到微服务,技术演变的必经之路
    JBOSS最大连接数配置和jvm内存配置
    数据库原理及应用第7章课后习题答案
    如何实现超高并发的无锁缓存?
    手工清理win7系统C盘的技巧
    SVN版本回退
    在sql server数据库的一个表中如何查询共有多少字段
    软件测试的四个阶段
    sp_change_users_login 'Update_One', '用户名', '登录名';
    讲一讲java异常及自定义异常
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4366116.html
Copyright © 2011-2022 走看看