React-组件的生命周期详解(含React16版本)

拈花ヽ惹草 提交于 2019-12-22 04:18:09

在一个组件的整个生命周期中,通过用户的交互来更新state或者props,重新渲染组件,更新页面的ui。组成一个简单的“状态机”。

react的生命周期三个阶段:

Mounting 挂载

1、 constructor()构造方法

constructor是ES6对类的默认方法,通过 new命令生成对象实例时自动调用该方法。初始化执行一次。使用constructor必须手动调用super方法。需要调用this.props必须传入props
在 super() 被调用之前,子类是不能使用 this 的,在 ES2015 中,子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。

class ClassName extends React.Component {
    constructor(props) {
        super(props);   // 必须调用super方法
        console.log(this.props); // 这里可以拿到this.props的值
        this.state = {};  // 在constructor中可以初始化state
        this.state = { color: props.color };   // !这种操作是错误的,应该避免
        this.handleClick = this.handleClick.bind(this);  // 将事件处理方法绑定到实例。
    }
    state = {};  // 也可以直接初始化state
}

通过集成extends React.Component 给组件初始化不会执行getDefaultProps、getInitialState

2、 componentWillMount => UNSAFE_componentWillMount()(即将被废弃)

首次渲染(render)之前调用,只执行一次。调用setState方法,是渲染之前最后更改state的最后机会。

3、static getDerivedStateFromProps(props, state)(新)

该生命周期在组件实例化以及接收新props后调用。它可以返回一个对象来更新state,或者返回null来表示新的props不需要任何state更新。这个新的生命周期可覆盖componentWillReceiveProps的所有用例。
更新后,setState也会调用该方法。

4、render组件渲染

该方法会创建一个虚拟DOM,用来表示组件的输出。对于一个组件来讲,render方法是唯一一个必需的方法。state或者props的更新或者componentShouldUpdate返回true都会引起render的重渲染,会多次执行。
该方法只能返回一个顶级组件,或者返回false/null;在这里也不能修改组件的状态,即不可调用setState方法

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

5、componentDidMount

组件渲染完成后调用该方法,只执行一次。在这里已经渲染出真实的dom节点了,可以再该方法中通过 this.getDOMNode() (新版本已被弃用,推荐使用ReactDOM.findDOMNode)访问到真实的 DOM。
该方法中也可以调用setState来更新状态重新渲染组件,这里也是设置定时器监听事件的好地方。

上面说过组件并不是真实的dom节点,如果需要从组件获取真实 DOM 的节点,可以通过ref属性。

class ClassName extends React.Component {
    constructor(props) {
        super(props);   // 必须调用super方法
        console.log(this.props); // 这里可以拿到this.props的值
        this.state = {};  // 在constructor中可以初始化state
    }
    componentDidMount() {
        console.log(ReactDOM.findDOMNode(this.refs.title))  // 返回<div>渲染</div>
    }
    render() {
        console.log(ReactDOM.findDOMNode(this.refs.title))  // 这里首次渲染拿不到值,返回null
        return <div ref=“title”>渲染</div>
    }
}

Updating 更新

1、componentWillReceiveProps(nextProps) => UNSAFE_componentWillReceiveProps(nextProps)(即将被废弃)

组件props发生改变会调用该方法(或者说只要父组件更新,不管props是否与以前相同,都会调用该方法), 接收一个参数nextProps,所以在这里可以继续拿到this.props的值。在这个方法中更新state是安全的,一般情况下为了避免任何props的改变多次触发state更新,
可以通过nextProps和this.props的比较后再做相关操作。

2、static getDerivedStateFromProps(props, state)(新)

3、 shouldComponentUpdate(nextProps, nextState)

通过返回true或者false来判断是否需要重新渲染组件。如果返回false,后面的ender 以及 componentWillUpdate,componentDidUpdate 方法都将不会执行。组件比较多时,使用该方法能够避免不需要的重渲染,优化性能。

class ClassName extends React.Component {
    constructor(props) {
        super(props);   // 必须调用super方法
        console.log(this.props); // 这里可以拿到this.props的值
        this.state = {};  // 在constructor中可以初始化state
    }
    componentDidMount() {
        console.log(ReactDOM.findDOMNode(this.refs.title))  // 返回<div>渲染</div>
    }
    shouldComponentUpdate: function(nextProps, nextState) {
        return nextProps.id !== this.props.id;   // 只有在id改变时才会重新渲染组件
    }
    render() {
        console.log(ReactDOM.findDOMNode(this.refs.title))  // 这里首次渲染拿不到值,返回null
        return <div ref=“title”>渲染</div>
    }
}

4、 componentWillUpdate(nextProps, nextState) => UNSAFE_componentWillUpdate(nextProps, nextState)(即将被废弃)

类似于componentWillMount,组件首次渲染后,如果再次收到state/props改变或者shouldComponentUpdate返回true,会调用该方法。在这里不能使用this.setState来修改状态。这个函数调用之后,就会把nextProps和nextState分别设置到this.props和this.state中。

5、render组件渲染

同上

6、getSnapshotBeforeUpdate(nextProps, nextState)(新)

render的输出结果渲染到dom之前调用。它的任何返回值都会作为参数传给componentDidUpdate。这个新的生命周期可覆盖componentWillUpdate的所有用例。

7、 componentDidUpdate(nextProps, nextState, snapshot)

类似于componentDidMount,在组件重新被渲染之后调用。可以在这里访问并修改 DOM。当使用getSnapshotBeforeUpdate返回值时,snapshot参数才会有值。

Unmounting 卸载

componentWillUnmount
该方法将会在 component 从DOM中移除时调用。一些组件相关的清理工作都可以在这里处理。

Error Handling 错误处理

1、static getDerivedStateFromError(error)

子组件抛出错误后调用该组件。他接收抛出的错误信息作为参数。

2、componentDidCatch(error, info)

注:新版本中加入的生命周期不可和即将被废弃的混用。

总结

Mounting

1、constructor
2、componentWillMount() => UNSAFE_componentWillMount()(即将被废弃)
3、static getDerivedStateFromProps(props, state)(新)
4、render
5、componentDidMount

Updating

1、componentWillReceiveProps() => UNSAFE_componentWillReceiveProps(nextProps)(即将被废弃)
2、static getDerivedStateFromProps(props, state)(新)
3、shouldComponentUpdate(nextProps, nextState)
4、componentWillUpdate() => UNSAFE_componentWillUpdate(nextProps, nextState)(即将被废弃)
5、render()
6、getSnapshotBeforeUpdate(nextProps, nextState)(新)
7、componentDidUpdate(nextProps, nextState, snapshot)

Unmounting

componentWillUnmount()

Error Handling

1、static getDerivedStateFromError(error)
2、componentDidCatch(error, info)

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!