-
初始化阶段 - 自动执行
-
constructor(props) 通过super继承父组件属性,然后赋值给this.props 定义状态 绑定事件this
-
componentWillMount 获取属性和状态,可以发送请求,修改数据
-
render 生成vdom 用来计算 this.props this.state 不能使用setState,是一个纯函数,必须有返回值
-
componentDidMount 可以发送数据请求和数据修改 - 可以获取并操作真实DOM
-
-
更新阶段 - 数据改变
-
componentWillReceiveProps(nextProps) [ 属性改变才执行 ] 接收新属性, 判断组件属性是否改变,可以用于监听 this.props是旧属性, this.props != nextProps 说明数据发生改变了
-
shouldComponentUpdate 可以优化组件性能的关键钩子函数, 控制组件是否要更新 返回值为true/false(true表示更新,false表示不更新)
-
componentWillUpdate 表示组件即将更新 作用:为更新做准备,里面不可以执行setState
-
render 当数据改变之后再一次生成VDOM,用于计算this.props和this.state
-
componentDidUpdate 获得了更新后的真实dom,可以操作真实dom,可以进行第三方库的实例化,此钩子不能执行setState
-
-
销毁阶段
-
componentWillUnmount 组件销毁, 善后,比如清除计时器、滚动事件、第三方库实例化出来的实例
-
-
错误处理阶段
componentDidCatch
-
记录错误信息和错误栈 、
-
功能实现降级UI
-