React学习笔记（三）-- 组件的生命周期

2023年8月11日 160次阅读 来源: 桂圆_noble

摘要

React中的组件类似于状态机，每个组件都被设计成为在其生命周期过程中输出稳定、语义化的标签。React组件的生命周期大致可以分为：创建时，存在期及销毁时。为了更好的控制每个生命周期环节，React提供了对应的钩子函数。

简介

我们知道React里面的组件其实就是一个简单的函数，这些函数完成了对数据和方法的封装，来帮助我们分离应用中的关注点，最终实现对页面的渲染。在组件的生命周期中，由于用户与应用间的交互，组件的props和states也会随之改变，相应的DOM也会发生变化。

React将组件的生命周期大概分为三个阶段：创建时，存在期及销毁时。每个阶段都对应着特定的钩子函数做出响应，接下来详细看一下这三个阶段。

创建时

一个实例初始化时调用的方法与其他各个后续实例创建时调用的方法略有不同。当我们首次初始化一个组件类的时候，会依次调用如下方法：

  • getDefaultProps
  • getInitialState
  • componentWillMount
  • render
  • componentDidMount

对于该组件类的所有后续应用，对比组件初始化过程，除了getDefaultProps方法，其他方法均会被调用：

  • getInitialState
  • componentWillMount
  • render
  • componentDidMount

存在期

初始化之后的组件会随着应用状态的改变，逐渐受到影响，会有如下方法依次执行：

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • render
  • componentDidUpdate

销毁时

最后，该组件使用完成后，componentWillUnmount方法将会被调用。

三个阶段对应的函数调用如上所述，接下来看一下每个方法的具体含义及作用。

组件的常见属性及方法

getDefaultProps

在组件类创建的时候调用一次，然后返回值被缓存下来。如果父组件没有指定 props 中的某个键，则此处返回的对象中的相应属性将会合并到 this.props （使用 in 检测属性）。该方法在任何实例创建之前调用，因此不能依赖于 this.props。另外，getDefaultProps() 返回的任何复杂对象将会在实例间共享，而不是每个实例拥有一份拷贝。

getInitialState

在每次组件挂载前均会被调用，返回值会作为this.state的初始值。在该方法内部允许调用this.props。

render

对于每一个组件来说，render()方法是必须的。render方法会创建一个虚拟DOM对象（比如<div/> 或者 React.DOM.div()），作为当前组件的一个输出，同时React要求render方法满足以下几点要求：

  • 只能出现一个顶级组件；
  • 通过this.props 和 this.state访问数据;
  • 可以返回null，false或者任何React组件(当返回 null 或者 false 的时候，this.getDOMNode() 将返回 null。)；
  • 尽量保证render函数不修改组件 state，不修改DOM的输出，也不和浏览器交互，每次调用都返回相同结果。

说明：如果需要和浏览器交互，在 componentDidMount() 中或者其它生命周期方法中做这件事。保持render() 纯粹，可以使服务器端渲染更加切实可行，也使组件更容易被理解。

propTypes

propTypes 对象允许验证传入到组件的 props（规定了组件props的类别与必须状态）。

var Test = React.createClass({ 
    propTypes: {
        requiredFunc: React.PropTypes.func.isRequired, // 函数且必须
        requiredAny: React.PropTypes.any.isRequired, // 可以是任何格式且必须
        bool: React.PropTypes.bool,  // Boolean
        func: React.PropTypes.func, // 函数
        number: React.PropTypes.number, // 数字
        string: React.PropTypes.string // 字符串
        ...
    },
     render:function(){ 
        return <div/> 
    }
});
var component = React.render( <Test requiredFunc="bar" bool="true" requiredAny="a"/>,document.body);

mixins

虽然组件的原则就是模块化，彼此之间相互独立，但是有时候不同的组件之间可能会存在共享行为，所以 React 提供了 mixins 这种方式来处理这种问题。Mixin 就是用来定义一些方法，使用这个 mixin 的组件能够自由的使用这些方法，所以 mixin 相当于组件的一个扩展。

// 定义SetIntervalMixin对象
var SetIntervalMixin = {
    componentWillMount: function() {
        this.intervals = [];
    },
    setInterval: function() {
        this.intervals.push(setInterval.apply(null, arguments));
    },
    componentWillUnmount: function() {
        this.intervals.map(clearInterval);
    }
};

var TickTock = React.createClass({
    mixins: [SetIntervalMixin], // 配置mixin数组，将SetIntervalMixin作为数组的元素
    getInitialState: function() {
        return {seconds: 0};
    },
    componentDidMount: function() {
        this.setInterval(this.tick, 1000); // 调用mixin中的setInterval方法
    },
    tick: function() {
        this.setState({seconds: this.state.seconds + 1});
    },
    render: function() {
        return (
            <p>
                React has been running for {this.state.seconds} seconds.
            </p>
        );
    }
});

React.render(
    <TickTock />,
    document.getElementById('example')
);

statics

statics 对象允许你定义静态的方法，这些静态的方法可以在组件类上调用。

var MyComponent = React.createClass({ 
    statics: { 
        customMethod: function(foo) { 
            return foo === 'bar'; 
        } 
    }, 
    render: function() {
     }
});
MyComponent.customMethod('bar'); // true

在这个块儿里面定义的方法都是静态的，意味着你可以在任何组件实例创建之前调用它们，这些方法不能获取组件的 props 和 state。如果你想在静态方法中检查 props 的值，在调用处把 props 作为参数传入到静态方法。

displayName

displayName 字符串用于输出调试信息。JSX 自动设置该值；

生命周期方法

组件的生命周期方法会在组件生命周期中某个确定的时间点执行。

挂载： componentWillMount

服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。如果在这个方法内调用setState，render() 将会感知到更新后的 state，将会执行仅一次，尽管 state 改变了。

挂载： componentDidMount

在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）。在生命周期中的这个时间点，组件拥有一个 DOM 展现，你可以通过 this.getDOMNode() 来获取相应 DOM 节点。如果想和其它 JavaScript 框架集成，使用 setTimeout 或者 setInterval 来设置定时器，或者发送 AJAX 请求，可以在该方法中执行这些操作。
注意：为了兼容 v0.9，DOM 节点作为最后一个参数传入。你依然可以通过this.getDOMNode()
获取 DOM 节点。

更新： componentWillReceiveProps

componentWillReceiveProps(object nextProps)

在组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用。用此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。

componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount });}

注意：对于 state，没有相似的方法： componentWillReceiveState。将要传进来的 prop 可能会引起 state 改变，反之则不然。如果需要在 state 改变的时候执行一些操作，请使用 componentWillUpdate。

更新： shouldComponentUpdate

boolean shouldComponentUpdate(object nextProps, object nextState)

在接收到新的 props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会。如果确定新的 props 和 state 不会导致组件更新，则此处应该 返回 false
。

shouldComponentUpdate: function(nextProps, nextState) { return nextProps.id !== this.props.id;}

如果 shouldComponentUpdate 返回 false，则 render() 将不会执行，直到下一次 state 改变。（另外，componentWillUpdate 和 componentDidUpdate 也不会被调用。）默认情况下，shouldComponentUpdate 总会返回 true，在 state 改变的时候避免细微的 bug，但是如果总是小心地把 state 当做不可变的，在 render() 中只从 props 和state 读取值，此时你可以覆盖 shouldComponentUpdate 方法，实现新老 props 和 state 的比对逻辑。如果性能是个瓶颈，尤其是有几十个甚至上百个组件的时候，使用 shouldComponentUpdate可以提升应用的性能。

更新： componentWillUpdate

componentWillUpdate(object nextProps, object nextState)

在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。使用该方法做一些更新之前的准备工作。
注意：你不能在该方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变，请使用 componentWillReceiveProps。

更新： componentDidUpdate

componentDidUpdate(object prevProps, object prevState)

在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作 DOM 元素。注意：为了兼容 v0.9，DOM 节点会作为最后一个参数传入。如果使用这个方法，你仍然可以使用 this.getDOMNode() 来访问 DOM 节点。

移除： componentWillUnmount

在组件从 DOM 中移除的时候立刻被调用。在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。

参考

【1】《React引领未来的用户界面开发框架》
【2】 React中文官网

    原文作者：桂圆_noble
    原文地址: https://www.jianshu.com/p/9bf6d723cfbe
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞