React：组件的生命周期

在组件的整个生命周期中，随着该组件的props或者state发生改变，其DOM表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。

一个React组件的生命周期分为三个部分：实例化、存在期和销毁时。

实例化

当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：

1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render
5、componentDidMount

当组件在服务端被实例化，首次被创建时，以下方法依次被调用：

1、getDefaultProps
2、getInitialState
3、componentWillMount
4、render

componentDidMount 不会在服务端被渲染的过程中调用。

getDefaultProps

对于每个组件实例来讲，这个方法只会调用一次，该组件类的所有后续应用，getDefaultPops 将不会再被调用，其返回的对象可以用于设置默认的 props(properties的缩写) 值。

var Hello = React.creatClass({
    getDefaultProps: function(){
        return {
            name: ‘pomy‘,
            git: ‘dwqs‘
        }
    },

    render: function(){
        return (
            <div>Hello,{this.props.name},git username is {this.props.dwqs}</div>
        )
    }
});

ReactDOM.render(<Hello />, document.body);

也可以在挂载组件的时候设置 props：

var data = [{title: ‘Hello‘}];
<Hello data={data} />

或者调用 setProps （一般不需要调用）来设置其 props：

var data = [{title: ‘Hello‘}];
var Hello = React.render(<Demo />, document.body);
Hello.setProps({data:data});

但只能在子组件或组件树上调用 setProps。别调用 this.setProps 或者 直接修改 this.props。将其当做只读数据。

React通过 propTypes 提供了一种验证 props 的方式，propTypes 是一个配置对象，用于定义属性类型：

var survey = React.createClass({
    propTypes: {
        survey: React.PropTypes.shape({
            id: React.PropTypes.number.isRequired
        }).isRequired,
        onClick: React.PropTypes.func,
        name: React.PropTypes.string,
        score: React.PropTypes.array
        ...
    },

    //...
})

组件初始化时，如果传递的属性和 propTypes 不匹配，则会打印一个 console.warn 日志。如果是可选配置，可以去掉.isRequired。常用的 PropTypes 如下：

getInitialState

对于组件的每个实例来说，这个方法的调用有且只有一次，用来初始化每个实例的 state，在这个方法里，可以访问组件的 props。每一个React组件都有自己的 state，其与 props 的区别在于 state只存在组件的内部，props 在所有实例中共享。

getInitialState 和 getDefaultPops 的调用是有区别的，getDefaultPops 是对于组件类来说只调用一次，后续该类的应用都不会被调用，而 getInitialState 是对于每个组件实例来讲都会调用，并且只调一次。

var LikeButton = React.createClass({
  getInitialState: function() {
    return {liked: false};
  },
  handleClick: function(event) {
    this.setState({liked: !this.state.liked});
  },
  render: function() {
    var text = this.state.liked ? ‘like‘ : ‘haven\‘t liked‘;
    return (
      <p onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </p>
    );
  }
});

ReactDOM.render(
  <LikeButton />,
  document.getElementById(‘example‘)
);

每次修改 state，都会重新渲染组件，实例化后通过 state 更新组件，会依次调用下列方法：

1、shouldComponentUpdate
2、componentWillUpdate
3、render
4、componentDidUpdate

但是不要直接修改 this.state，要通过 this.setState 方法来修改。

componentWillMount

该方法在首次渲染之前调用，也是再 render 方法调用之前修改 state 的最后一次机会。

render

该方法会创建一个虚拟DOM，用来表示组件的输出。对于一个组件来讲，render方法是唯一一个必需的方法。render方法需要满足下面几点：

  1. 只能通过 this.props 和 this.state 访问数据（不能修改）
  2. 可以返回 null,false 或者任何React组件
  3. 只能出现一个顶级组件，不能返回一组元素
  4. 不能改变组件的状态
  5. 不能修改DOM的输出

render方法返回的结果并不是真正的DOM元素，而是一个虚拟的表现，类似于一个DOM tree的结构的对象。react之所以效率高，就是这个原因。

componentDidMount

该方法不会在服务端被渲染的过程中调用。该方法被调用时，已经渲染出真实的 DOM，可以再该方法中通过 this.getDOMNode() 访问到真实的 DOM(推荐使用 ReactDOM.findDOMNode())。

var data = [..];
var comp = React.createClass({
    render: function(){
        return <imput .. />
    },
    componentDidMount: function(){
        $(this.getDOMNode()).autoComplete({
            src: data
        })
    }
})

由于组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性：

var Area = React.createClass({
    render: function(){
        this.getDOMNode(); //render调用时，组件未挂载，这里将报错

        return <canvas ref=‘mainCanvas‘>
    },
    componentDidMount: function(){
        var canvas = this.refs.mainCanvas.getDOMNode();
        //这是有效的，可以访问到 Canvas 节点
    }
})

需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。

存在期

此时组件已经渲染好并且用户可以与它进行交互，比如鼠标点击，手指点按，或者其它的一些事件，导致应用状态的改变，你将会看到下面的方法依次被调用

1、componentWillReceiveProps
2、shouldComponentUpdate
3、componentWillUpdate
4、render
5、componentDidUpdate

componentWillReceiveProps

组件的 props 属性可以通过父组件来更改，这时，componentWillReceiveProps 将来被调用。可以在这个方法里更新 state,以触发 render 方法重新渲染组件。

componentWillReceiveProps: function(nextProps){
    if(nextProps.checked !== undefined){
        this.setState({
            checked: nextProps.checked
        })
    }
}

shouldComponentUpdate

如果你确定组件的 props 或者 state 的改变不需要重新渲染，可以通过在这个方法里通过返回 false 来阻止组件的重新渲染，返回 `false 则不会执行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法。

该方法是非必须的，并且大多数情况下没有在开发中使用。

shouldComponentUpdate: function(nextProps, nextState){
    return this.state.checked === nextState.checked;
    //return false 则不更新组件
}

componentWillUpdate

这个方法和 componentWillMount 类似，在组件接收到了新的 props 或者 state 即将进行重新渲染前，componentWillUpdate(object nextProps, object nextState) 会被调用，注意不要在此方面里再去更新 props 或者 state。

componentDidUpdate

这个方法和 componentDidMount 类似，在组件重新被渲染之后，componentDidUpdate(object prevProps, object prevState) 会被调用。可以在这里访问并修改 DOM。

销毁时

componentWillUnmount

每当React使用完一个组件，这个组件必须从 DOM 中卸载后被销毁，此时 componentWillUnmout 会被执行，完成所有的清理和销毁工作，在 componentDidMount 中添加的任务都需要再该方法中撤销，如创建的定时器或事件监听器。

当再次装载组件时，以下方法会被依次调用：

1、getInitialState
2、componentWillMount
3、render
4、componentDidMount

反模式

在 getInitialState 方法中，尝试通过 this.props 来创建 state 的做法是一种反模式。

//反模式
getDefaultProps: function(){
    return {
        data: new Date()
    }
},
getInitialState: function(){
    return {
        day: this.props.date - new Date()
    }
},
render: function(){
    return <div>Day:{this.state.day}</div>
}

经过计算后的值不应该赋给 state，正确的模式应该是在渲染时计算这些值。这样保证了计算后的值永远不会与派生出它的 props 值不同步。

//正确模式
getDefaultProps: function(){
    return {
        data: new Date()
    }
},
render: function(){
    var day = this.props.date - new Date();
    return <div>Day:{day}</div>
}

如果只是简单的初始化 state，那么应用反模式是没有问题的。

总结

以下面的一张图总结组件的生命周期

React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁

原文地址：https://segmentfault.com/a/1190000004168886?utm_source=tag-newest

相关内容：https://www.cnblogs.com/qiaojie/p/6135180.html

原文地址：https://www.cnblogs.com/xbzhu/p/10686238.html

时间： 2024-11-14 08:43:22

React：组件的生命周期的相关文章

2. React组件的生命周期

2. React组件的生命周期 使用React开发时候用到最多的就是React的组件了,通过继承React.Component,加入constructor构造函数,实现Render方法即可.这当中React组件为我们提供了很多钩子,以便更加方便精细的控制程序. 钩子包括:componentWillMount/componentDidMount,同时在调用setState时候会触发:componentWillReceiveProps/shouldComponentUpdate/ComponentW

React组件的生命周期

整个组件,从创建组件类开始,到渲染,到消亡的过程,就是组件的生命周期. 组件的生命周期可以分为三个阶段: 挂载阶段 更新阶段 卸载阶段 挂载阶段 在这个过程中,会触发以下几个事件 getDefaultProps,设置默认属性 getInitialState,设置初始状态 componentWillMount 即将挂载 render 渲染,就是挂载 componentDidMount 挂载完成 <!DOCTYPE html> <html> <head> <meta

（三）表单数据的搜集和react组件的生命周期

四:表单数据的搜集 (1)         问题: 在react应用中, 如何收集表单输入数据 (2)         包含表单的组件分类 受控组件: 表单项输入数据能自动收集成状态 非受控组件: 需要时才手动读取表单输入框中的数据 /* 需求: 自定义包含表单的组件 1. 界面如下所示 2. 输入用户名密码后, 点击登陆提示输入信息 3. 不提交表单 */ class LoginForm extends React.Component{ //搜集表单数据 constructor(props){

React 组件的生命周期API和事件处理

一.简单记录React的组件的简洁的生命周期API: A:实例化期: 一个实例第一次被创建时所调用的API与其它后续实例被创建时所调用的API略有不同. 实例第一次被创建时会调用getDefaultProps,而后续实例创建时不会调用这个方法. 实例被创建时,依次被调用的API有: getDefaultProps: 实例第一次被创建时才调用,对于组件类来说,它只调用一次. 这个方法返回的对象可为实例设置默认的props值. getInitialState: 对于每个实例来说,这个方法只调用一次.

react 组件的生命周期

componentWillMount:组件出现前,dom还没有渲染到html文档里面: componentDidMount:件渲染完成 已经出现在dom文档里; componentWillUnmount:说该事件在组件即将被移除dom时会触发; React 生命周期 demo 首先引入相关的js <script type="text/javascript" src="react.js"></script> <script type=&q

react组件的生命周期机制

组件更新 (组件状态改变)新一轮rendershouldComponentUpdate(newPros,newState)componentWillUpdatecomponentDidUpdate 组件注册getDefaultPropsgetInitialStatecomponentWillMountrender()componentDidMount 组件消亡ReactDOM.unmountComponentAtNode(destination) 去调用组件消亡生命周期函数componentWi

React组件的生命周期各环节运作流程

'use strict'; React.createClass({ //1.创建阶段 getDefaultProps:function(){ //在创建类的时候被调用 console.log('getDefaultProps'); return {}; }, //2.实例化阶段 getInitailState:function(){ //获取this.state的默认值 console.log('getInitailState'); return {}; }, componentWillMoun

Vue与React的异同 -生命周期

vue的生命周期 创建前 beforeCreate 创建   create 挂载前 beforeMount 挂载 mounted 更新前 beforeUpdate 更新 updated 销毁前 beforeDestroyed 销毁  destoryed methods --方法 -----------------------------------华丽的分割线------------------------- 一个React组件的生命周期分为三个部分:挂载期(Mounting).存在更新期(Up

Android React Native组件的生命周期及回调函数

熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开发中,React Native组件的生命周期,大致分为三个阶段,分别是: 1.组件第一次绘制阶段,这个阶段主要是组件的加载和初始化: 2.组件在运行和交互阶段,这个阶段组件可以处理用户交互,或者接收事件更新界面: 3.组件卸载消亡的阶段,这个阶段主要是组件的清理工作. 在Android React