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')
    );
    

      

  • 相关阅读:
    Spring之Redis访问(Spring-data-redis)
    SpringCloud之Hystrix容错保护原理及配置
    SpringCloud之Feign声明式调用原理及配置
    SpringCloud之Ribbon负载均衡配置
    基于Zookeeper实现分布式锁
    SpringCloud之Eureka注册中心原理及其搭建
    SpringBoot定时任务(schedule、quartz)
    Java和操作系统交互(Java 代码是怎么执行)(转)
    深入SpringBoot注解原理及使用
    Spring事务的配置、参数详情及其原理介绍(Transactional)
  • 原文地址:https://www.cnblogs.com/1zhangwenjing/p/13630553.html
Copyright © 2011-2022 走看看