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

    The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson you will learn some simple uses for these hooks.

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    class App extends React.Component {
        constructor(){
            super();
            this.state = {
                val: 0
            }
        }
        update(){
            this.setState({val: this.state.val + 1 })
        }
        componentWillMount(){
            console.log(this.state)
            this.setState({
                val: this.state.val * 2
            });
            console.log("Component Will Mount");
        }
        render() {
            console.log("rendering");
            return (
                <div>
                    <button onClick={this.update.bind(this)}>{this.state.val}</button>
                </div>
            )
        }
        componentDidMount(){
            this.inc = setInterval(this.update.bind(this), 500);
            console.log("Component Did Mount");
        }
        componentWillUnmount(){
            clearInterval(this.inc);
            console.log("Component will unmount");
        }
    }
    
    export default class Wrapper extends React.Component{
        constructor(){
            super();
        }
        mount(){
            ReactDOM.render(<App />, document.getElementById('a'));
        }
        unmount(){
            // Unmount a dom node 
            ReactDOM.unmountComponentAtNode(document.getElementById('a'))
        }
        render() {
            return (
                <div>
                    <button onClick={this.mount.bind(this)}>Mount</button>
                    <button onClick={this.unmount.bind(this)}>Unmount</button>
                    <div id="a"></div>
                </div>
            );
        }
    
    }
  • 相关阅读:
    弹框定位
    多窗口切换
    frame嵌套页面元素的定位
    元素的等待
    键盘的操作
    鼠标的操作
    下拉列表框的选定定位
    Css定位元素
    依赖反射练习实例
    excel筛选两列值是否相同,如果相同返回第三列值
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5774899.html
Copyright © 2011-2022 走看看