三、组件的生命周期
只有类组件才有生命周期,函数组件没有生命周期
1,挂载阶段
被创建,执行初始化,并被挂载到dom,完成第一次渲染。依次调用:
constructor
- 是es6 class的构造方法。接收一个props参数,props是从父组件传入的属性对象,如果父组件没有传入而组件自身定义了默认属性,那么props指向组件的默认属性。constructor通常用于初始化组件的state以及绑定事件处理方法等工作。
componentWillMount
- 在组件被挂载到DOM前调用,且只会调用一次,在该方法中执行的工作都可以提前到constructor,在这个方法中调用this.setState不会引起组件的重新渲染。
render
- 这是定义组件唯一必要的方法。根据props和state返回一个React元素,用于描述UI。render并不负责组件的实际渲染工作,真正的渲染是React自身负责。render是一个纯函数,在这个方法中不能执行任何有副作用的操作,例如:不能调用this.setState。
componentDidMount
- 在组件被挂载到DOM前调用,且只会调用一次。这时候可以获取到DOM结构。这个方法通常还用于向服务器请求数据。在这个方法中调用this.setState会引起组件的重新渲染。
2,更新阶段
props或state可以引起组件更新。
- props引起的组件更新本质上是由渲染该组件的父组件引起的,当父组件的render被调用,组件会发生更新。无论props是否改变,父组件render方法每一次调用都会导致组件更新。
- state引起的组件更新是通过调用this.setState修改组件state触发的。
此阶段依次调用:
componentWillReceiveProps(nextProps)
- 只在props引起的组件更新过程中才会被调用,state引起的组件更新不会触发。nextProps是父组件传递给当前组件的新的props,但是父组件传递给子组件的props可能没有变化,因此需要比较nextProps和this.props来决定是否执行后续逻辑。
- this.state指向更新前的state。
shouldComponentUpdate(nextProps,nextState)
- 该方法返回true,组件继续更新;返回false,组件停止更新。一般通过比较nextProps、nextState和当前的props、state来决定返回结果,默认返回true。
- 该方法可以用来减少组件不必要的渲染,优化组件性能。
- this.state指向更新前的state
- 不能在该方法中调用setState,否则会引起循环调用的问题。
componentWillUpdate(nextProps,nextState)
- 作为组件更新发生前执行某些工作的地方,一般很少用。
- this.state指向更新前的state。
- 不能在该方法中调用setState,否则会引起循环调用的问题。
render
- this.state指向更新后的state。
componentDidUpdate(prevProps、prevState)
- 组件更新后被调用,可以作为操作更新后的DOM的地方。这个方法的两个参数prevProps、prevState代表组件更新前的props和state。
- this.state指向更新后的state。
3,卸载阶段
componentWillUnmount
- 在卸载前调用,可以在这里执行一些清理工作,比如定时器、componentDidMount中手动创建的DOM元素等。