react的生命周期

最新推荐文章于 2024-10-02 19:52:35 发布

weixin_44829616

最新推荐文章于 2024-10-02 19:52:35 发布

阅读量136

点赞数 1

分类专栏： react

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第一个是组件初始化（initialzation）阶段。

react 的初始化阶段我们一般继承了React Component 的类中。这样该类也就继承这个react的基类，这时才有render(), 生命周期等方法可以使用（这也是函数组件不能使用这些方法的原因）。
我们可以通过子类的constructor() 中调用super(props)来调用基类的构造方法（constructor()），也将父组件的props注入给子组件，供子组件读取（子组件中对props只读不可变，想要改变的话可以在子组件中设置state值来接收传递过来的值，然后通过setState改变）。
而constructor() 用来做一些组件初始化工作（如定义 this.state的初始内容）。

import React, { Component } from 'react';
class Test extends Component {
  constructor(props) {
    super(props);
  }
}
注： 
(1) getDefaultProps() 设置默认的props，也可以用dufaultProps设置组件的默认属性.(用的比较少)
(2)  getInitialState() 在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问 this.props

第二个是组件的挂载（Mounting）阶段

此阶段分为： componentWillMount, render, componentDidMount 三个时期。
componentWillMount：在组件挂载到DOM前调用，且只会被调用一次,在这调用this.setState不会引起组件重新渲染，也可以把写在这边的内容提前到constructor()中，所以项目中很少用render: 根据组件的props和state, return 一个React元素（描述组件，即UI），不负责组件实际渲染工作，之后由React自身根据此元素去渲染出页面DOM。 render是纯函数不能在里执行this.setState，会有改变组件状态的副作用。
componentDidMount: 组件挂载到DOM后调用，且只会被调用一次(该生命周期函数dom已真实渲染到页面，已可以操作页面dom及相关事件绑定等操作)

第三个是组件的更新（Upate）阶段

需要先明确下react组件更新机制。setState引起的state更新或父组件重新render引起的props更新，更新后的state和props相对之前无论是否有变化，都将引起子组件的重新render
造成组件更新有两类（三种）情况：
（1）父组件重新render
1) 每当父组件重新render导致的重传props，子组件将直接跟着重新渲染，无论props是否有变化。可通过shouldComponentUpdate方法优化

class Child extends Component {
   // 应该使用这个方法，否则无论props是否有变化都将会导致组件跟着重新渲染
   shouldComponentUpdate(nextProps, nextState){ 
        if(nextProps.someThings === this.props.someThings){
          return false
        }
    }
    render() {
        return <div>{this.props.someThings}</div>
    }
}

2) 在componentWillReceiveProps方法中，将props转换成自己的state

class Child extends Component {
    constructor(props) {
        super(props);
        this.state = {
            someThings: props.someThings
        };
    }
    // 父组件重传props时就会调用这个方法
    componentWillReceiveProps(nextProps) { 
        this.setState({someThings: nextProps.someThings});
    }
    render() {
        return <div>{this.state.someThings}</div>
    }
}

根据官网描述：在该函数(componentWillReceiveProps)中调用 this.setState() 将不会引起第二次渲染
（这里不会第二次：个人理解是会渲染，但不会同时因为props & state 改变而同时渲染两次）。
此阶段分为： componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render , compoentDidUpdate

componentWillReceiveProps(nextProps)
此方法只调用于props引起的组件更新过程中，参数nextProps是父组件传给当前组件的新props。但父组件render方法的调用不能保证重传给当前组件的props是有变化的，所以在此方法中根据nextProps和this.props来查明重传的props是否改变，以及如果改变了要执行啥，比如根据新的props调用this.setState出发当前组件的重新render
shouldComponentUpdate(nextProps, nextState)

此方法通过比较nextProps，nextState及当前组件的this.props，this.state，返回true时当前组件将继续执行更新过程，返回false则当前组件更新停止，以此可用来减少组件的不必要渲染，优化组件性能。