zoukankan      html  css  js  c++  java
  • react生命周期

    import ReactDom from 'react-dom';
    class LifeCycle extends React.Component {
        constructor(props) {
            super(props);
            alert("Initial render");
            alert("constructor");
            this.state = {str: "hello"};
        }
     
        componentWillMount() {
            alert("componentWillMount");
        }
     
        componentDidMount() {
            alert("componentDidMount");
        }
     
        componentWillReceiveProps(nextProps) {
            alert("componentWillReceiveProps");
        }
     
        shouldComponentUpdate() {
            alert("shouldComponentUpdate");
            return true;        // 记得要返回true
        }
     
        componentWillUpdate() {
            alert("componentWillUpdate");
        }
     
        componentDidUpdate() {
            alert("componentDidUpdate");
        }
     
        componentWillUnmount() {
            alert("componentWillUnmount");
        }
     
        setTheState() {
            let s = "hello";
            if (this.state.str === s) {
                s = "HELLO";
            }
            this.setState({
                str: s
            });
        }
     
        forceItUpdate() {
            this.forceUpdate();
        }
     
        render() {
            alert("render");
            return(
                <div>
                    <span>{"Props:"}<h2>{parseInt(this.props.num)}</h2></span>
                    <br />
                    <span>{"State:"}<h2>{this.state.str}</h2></span>
                </div>
            );
        }
    }
     
    class Container  extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                num: Math.random() * 100
            };
        }
     
        propsChange() {
            this.setState({
                num: Math.random() * 100
            });
        }
     
        setLifeCycleState() {
            this.refs.rLifeCycle.setTheState();
        }
     
        forceLifeCycleUpdate() {
            this.refs.rLifeCycle.forceItUpdate();
        }
     
        unmountLifeCycle() {
            // 这里卸载父组件也会导致卸载子组件
            React.unmountComponentAtNode(document.getElementById("container"));
        }
     
        parentForceUpdate() {
            this.forceUpdate();
        }
     
        render() {
            return (
                <div>
                    <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.propsChange.bind(this)}>propsChange</a>
                    <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.setLifeCycleState.bind(this)}>setState</a>
                    <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.forceLifeCycleUpdate.bind(this)}>forceUpdate</a>
                    <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.unmountLifeCycle.bind(this)}>unmount</a>
                    <a href="javascript:;" className="weui_btn weui_btn_primary" onClick={this.parentForceUpdate.bind(this)}>parentForceUpdateWithoutChange</a>
                    <LifeCycle ref="rLifeCycle" num={this.state.num}></LifeCycle>
                </div>
            );
        }
    }
     
    ReactDom.render(
        <Container></Container>,
        document.getElementById('root')
    );
    

      

  • 相关阅读:
    markDown 语法学习
    flutter 自定义输入框组件
    flutter 学习零碎知识点01
    如何让模拟的json数据接口能够正常的在手机上有效果
    react高阶组件的使用
    如何把原生小程序项目合并的mpvue项目中
    如何把一个vue组件改为ionic/angular组件
    浅析MySQL中change与modify的区别
    如何在电脑上配置两个tomcat
    警告-SetPropertiesRule Server Service Engine Host Context
  • 原文地址:https://www.cnblogs.com/1zhangwenjing/p/13630553.html
Copyright © 2011-2022 走看看