美文网首页
react 组件的生命周期

react 组件的生命周期

作者: Arale_zh | 来源:发表于2019-03-14 17:09 被阅读0次

    组件的生命周期

    1. 组件的三个生命周期状态:
      • Mount:插入真实 DOM
      • Update:被重新渲染
      • Unmount:被移出真实 DOM
    2. React 为每个状态都提供了两种勾子(hook)函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用
      • componentWillMount()
      • componentDidMount() : 已插入真实DOM, 在render之后才会执行
      • componentWillUpdate(object nextProps, object nextState)
      • componentDidUpdate(object prevProps, object prevState)
      • componentWillUnmount()
    3. 生命周期流程:
      1. 第一次初始化渲染显示: render()
        • constructor(): 创建对象初始化state
        • componentWillMount() : 将要插入回调
        • render() : 用于插入虚拟DOM回调
        • componentDidMount() : 已经插入回调
      2. 每次更新state: this.setSate()
        • componentWillUpdate() : 将要更新回调
        • render() : 更新(重新渲染)
        • componentDidUpdate() : 已经更新回调
      3. 删除组件
        • ReactDOM.unmountComponentAtNode(document.getElementById('example')) : 移除组件
        • componentWillUnmount() : 组件将要被移除回调
      4. 注意:
        • 一般会在componentDidMount()中: 开启监听, 发送ajax请求
        • 可以在componentWillUnmount()做一些收尾工作: 停止监听
        • 生命周期还有一个方法(后面需要时讲): componentWillReceiveProps
    class LifeCycle extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                person: {
                    username: 'kobe',
                    age: 39
                }
            }
            console.log('constructor(), 生成实例对象');
        }
        // 组件将要被挂载
        componentWillMount(){
            // console.log(this)// 实例对象;
            console.log('componentWillMount() 组件将要被挂载');
            // 发送ajax请求, 开启监听
            setTimeout(function () {
                this.setState({
                    person: {
                        username: 'wade',
                        age: 36
                    }
                });
            }.bind(this), 2000)
            setTimeout(() => {
                this.setState({
                    person: {
                        username: 'anverson',
                        age: 42
                    }
                });
            }, 3000);
        }
        // 组件已经挂载完毕
        componentDidMount(){
            console.log('componentDidMount() 组件已经挂载完毕');
            setTimeout(() => {
                ReactDOM.unmountComponentAtNode(document.getElementById('example'));
            }, 4000);
    
            this.intervalId = setInterval(() => {
                console.log('setInterval()');
            }, 1000)
        }
        // 组件将要被更新
        componentWillUpdate(){
            console.log('componentWillUpdate() 组件将要被更新');
        }
        // 组件更新完毕
        componentDidUpdate(){
            console.log('componentDidUpdate() 组件更新完毕');
        }
        // 组件将要被卸载
        componentWillUnmount(){
            console.log('componentWillUnmount() 组件将要被卸载');
            // 收尾工作,关掉定时器
            clearInterval(this.intervalId);
        }
        render(){
            console.log('render()');
            let {person} = this.state;
            return (
                <div>
                    <p>姓名: {person.username}----年龄:{person.age}</p>
                </div>
            )
        }
    }
    
    ReactDOM.render(<LifeCycle />, document.getElementById('example'));
    

    相关文章

      网友评论

          本文标题:react 组件的生命周期

          本文链接:https://www.haomeiwen.com/subject/xcycmqtx.html