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

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    export default class App extends React.Component {
        constructor(){
            super();
            this.state = {
                val: 0
            }
        }
        update(){
            this.setState({
                val: this.state.val + 1
            })
        }
        componentWillMount(){
            console.log("Component Will Mount");
        }
        render() {
            console.log("rendering");
            return (
                <div>
                    <button onClick={this.update.bind(this)}>{this.state.val}</button>
                </div>
            )
        }
        componentDidMount(){
            console.log("Component Did Mount");
        }
    }

    "componentWillMount" happen before rendering, "state" and "props" are ready, but DOM is not rendered yet.

    "componentDidMount" happen after component rendered to the DOM, can access DOM Node.

  • 相关阅读:
    WIKI 配置参数
    SSH远程错误或者登录解决方法
    Mysql my.conf配置说明
    Mysql 常用命令
    Nginx 开机启动
    排序的总结
    strcpy函数实现(转载)
    函数指针传递
    地址的强制转换
    结构体内存对齐
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5774888.html
Copyright © 2011-2022 走看看