专栏首页JavaEdgeReact.js实战之React 生命周期1 组件的生命周期

React.js实战之React 生命周期1 组件的生命周期

ReactJS 的核心思想是组件化,即按功能封装成一个一个的组件,各个组件维护自己的状态和 UI,当状态发生变化时,会自定重新渲染整个组件,多个组件一起协作共同构成了 ReactJS 应用。

为了能够更好的创建和使用组件,我们首先要了解组件的生命周期。 生命周期

1 组件的生命周期

创建阶段、实例化阶段、更新阶段、销毁阶段。 下面对各个阶段分别进行介绍。

1.1加载阶段

  • 该阶段主要发生在创建组件类的时候,即调用 React.createClass 时触发
  • 这个阶段只会触发一个 getDefaultProps 方法,该方法会返回一个对象并缓存。然后与父组件指定的 props 对象合并,最后赋值给 this.props 作为该组件的默认属性。

1.2 实例化阶段

该阶段主要发生在实例化组件类的时候,也就是该组件类被调用的时候触发。 这个阶段会触发一系列的流程,按执行顺序如下 (1)getInitialState:初始化组件的 state 的值。其返回值会赋值给组件的 this.state 属性。 (2)componentWillMount:根据业务逻辑来对 state 进行相应的操作。 (3)render:根据 state 的值,生成页面需要的虚拟 DOM 结构,并返回该结构。 (4)componentDidMount:对根据虚拟 DOM 结构而生的真实 DOM 进行相应的处理。组件内部可以通过 ReactDOM.findDOMNode(this) 来获取当前组件的节点,然后就可以像 Web 开发中那样操作里面的 DOM 元素了。

1.3 更新阶段

这主要发生在用户操作之后或者父组件有更新的时候,此时会根据用户的操作行为进行相应得页面结构的调整。这个阶段也会触发一系列的流程,按执行顺序如下: (1)componentWillReceiveProps:当组件接收到新的 props 时,会触发该函数。在改函数中,通常可以调用 this.setState 方法来完成对 state 的修改。 (2)shouldComponentUpdate:该方法用来拦截新的 props 或 state,然后根据事先设定好的判断逻辑,做出最后要不要更新组件的决定。 (3)componentWillUpdate:当上面的方法拦截返回 true 的时候,就可以在该方法中做一些更新之前的操作。 (4)render:根据一系列的 diff 算法,生成需要更新的虚拟 DOM 数据。(注意:在 render 中最好只做数据和模板的组合,不应进行 state 等逻辑的修改,这样组件结构更加清晰) (5)componentDidUpdate:该方法在组件的更新已经同步到 DOM 中去后触发,我们常在该方法中做一 DOM 操作。

1.4 销毁阶段

这个阶段只会触发一个叫 componentWillUnmount 的方法。 当组件需要从 DOM 中移除的时候,我们通常会做一些取消事件绑定、移除虚拟 DOM 中对应的组件数据结构、销毁一些无效的定时器等工作。这些事情都可以在这个方法中处理。

import React from 'react';
import ReactDOM from 'react-dom';


class Component extends React.Component{
    // 构造函数
    constructor(props){
        super(props)
        this.state = {
            data: 'Old State'
        }
        console.log('初始化数据','constructor');
    }
    // 组件将要加载
    componentWillMount(){
        console.log('componentWillMount');
    }
    // 组件加载完成
    componentDidMount(){
        console.log('componentDidMount');
    }
    // 将要接收父组件传来的props
    componentWillReceiveProps(){
        console.log('componentWillReceiveProps');
    }
    // 子组件是不是应该更新
    shouldComponentUpdate(){
        console.log('shouldComponentUpdate');
        return true;
    }
    // 组件将要更新
    componentWillUpdate(){
        console.log('componentWillUpdate');
    }
    // 组件更新完成
    componentDidUpdate(){
        console.log('componentDidUpdate');
    }
    // 组件即将销毁
    componentWillUnmount(){
        console.log('componentWillUnmount');
    }
    // 处理点击事件
    handleClick(){
        console.log('更新数据:');
        this.setState({
            data: 'New State'
        });
    }
    // 渲染
    render(){
        console.log('render')
        return (
            <div>
                <div>Props: {this.props.data}</div>
                <button onClick={()=>{this.handleClick()}}>更新组件</button>
            </div>
        );
    }
}

class App extends React.Component{
    // 构造函数
    constructor(props){
        super(props)
        this.state = {
            data: 'Old Props',
            hasChild: true
        }
        console.log('初始化数据','constructor');
    }
    onPropsChange(){
        console.log('更新props:');
        this.setState({
            data: 'New Props'
        });
    }
    onDestoryChild(){
        console.log('干掉子组件:');
        this.setState({
            hasChild: false
        });
    }
    render(){
        return (
            <div>
                {
                    this.state.hasChild ? <Component data={this.state.data}/> : null
                }
                <button onClick={()=>{this.onPropsChange()}}>改变Props</button>
                <button onClick={()=>{this.onDestoryChild()}}>干掉子组件</button>
            </div>
        );
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById('app')
);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaSwing-ItemListener接口

    用于接收项目事件的监听器界面。 对处理项目事件感兴趣的类将实现此接口。 然后使用该类创建的对象使用组件的addItemListener方法向该组件注册。 发生项...

    JavaEdge
  • React.js 实战 - 组件 & Props

    组件可以将UI切分成一些独立的、可复用的部件,这样你就只需专注于构建每一个单独的部件.

    JavaEdge
  • React.js 实战之 State & 生命周期将函数转换为类为一个类添加局部状态将生命周期方法添加到类中

    每当Clock组件第一次加载到DOM时,我们都想生成定时器,这在React中被称为挂载

    JavaEdge
  • Vue 组件(二):父子组件通信

    子组件是不能直接访问父组件中的数据的,但有时候父子组件之间需要进行数据交互,这就涉及到了父子组件通信的问题。简单来说,父组件向子组件通信是通过 props 进行...

    Chor
  • 知乎 Android 客户端组件化实践

    知乎 Android 客户端最早使用的是最常见的单工程 MVC 架构,所有业务逻辑都放在了主工程 Module 里,网络层和一些公共代码分别被抽成了一个 Mod...

    用户1269200
  • 前端面试宝典(五)—— Vue

    MVVM是Model-View-ViewModel的简写,Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑;View 代表 UI...

    萌兔IT
  • Web Components是不是Web的未来

    今天 ,Web 组件已经从本质上改变了HTML。初次接触时,它看起来像一个全新的技术。Web组件最初的目的是使开发人员拥有扩展浏览器标签的能力,可以自由的进行定...

    葡萄城控件
  • 前端周刊-2018年9月第三期

    链接: http://taobaofed.org/blog/2017/01/05/writing-readable-code/

    前端迷
  • 微信小程序基本组件概述

    为了更好的理解微信小程序,本文90%文字描述来源于官网的介绍。官网原链接https://mp.weixin.qq.com/debug/wxadoc/dev/co...

    xiangzhihong
  • beego+vue父子组件通信(父子页面传值、父子组件传值、父子路由传值)

    场景:有head和foot,为父组件 侧栏tree为子组件 点击tree,右侧孙组件根据点击tree的id,来更改表格内容。

    hotqin888

扫码关注云+社区

领取腾讯云代金券