zoukankan      html  css  js  c++  java
  • [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.

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    export default class App extends React.Component {
        constructor(){
            super();
            this.state = {
                increasing: false
            }
        }
        update(){
            ReactDOM.render(<App val={this.props.val+1} /> , document.getElementById('app'));
        }
        componentWillReceiveProps(nextProps){
            //Invoked when a component is receiving new props. This method is not called for the initial render.
            this.setState({
                increasing: nextProps.val > this.props.val
            })
        }
        shouldComponentUpdate(nextProps, nextState){
            // Control whether the component should re-render
            return nextProps.val % 5 === 0; // update dom every 5 clicks
        }
        render() {
            console.log(this.state.increasing);
            return (
                <div>
                    <button onClick={this.update.bind(this)}>{this.props.val}</button>
                </div>
            )
        }
        componentDidUpdate(prevProps, prevState){
            //After DOM update
            console.log("prevProps", prevProps);
        }
    }
    
    App.defaultProps = {
        val: 0
    }
     
  • 相关阅读:
    linux kernel ftrace 之wakeup tracer and wakeup_rt tracer
    urb传输的代码分析
    open/ioctl in kernel
    淺談C51記憶體優化(data idata xdata)
    8051 XDATA
    Android.bp
    android bionic
    echo +80 > /sys/class/rtc/rtc0/wakealarm
    高清地图下载
    更新和删除数据
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5774920.html
Copyright © 2011-2022 走看看