一个栗子看懂react的生命周期
npm install
安装完毕后分别执行
webpack
和
webpack-dev-server
再访问localhost:8080即可
对组件从第一次实例化到最后销毁组件的整个生命周期的控制。
分为三阶段:
- 是组件第一次渲染阶段,在这里完成了组件的初始化和加载;(实例化)
- 是组件在运行和交互阶段,这个阶段组件可以处理用户交互,或者接收事件更新界面,以及因父组件的重新渲染而造成的变化;(存在期)
- 是组件卸载消亡的阶段,这里做一些组件的清理工作。(销毁期)
- getDefaultProps()
在组件创建之前,会先调用 getDefaultProps() ,这是全局调用一次,严格地来说,这不是组件的生命周期的一部分。
- getInitialState()
在组件被创建并加载候,首先调用 getInitialState() ,来初始化组件的状态。这个函数在整个生命周期中只被调用一次。- componentWillMount()
准备第一次加载组件,会调用 componentWillMount(),这是render前最后一次修改state的机会。- render()
渲染页面- componentDidMount()
在组件第一次绘制之后,会调用 componentDidMount() ,通知组件已经加载完成。可以使用refs来获取dom节点。
- componentWillReceviceProps(nextProps)
如果组件收到新的属性(props),就会调用该方法,在这个回调函数里面,你可以根据属性的变化,通过调用 this.setState() 来更新你的组件状态,这里调用更新状态是安全的,并不会触发额外的 render() 调用。- componentShouldUpdate(nextProps, nextState)
当组件接收到新的属性和状态改变的话,都会触发调用 shouldComponentUpdate(...),输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样, nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件,如果 true 表示需要更新,继续走后面的更新流程。否者,则不更新,直接进入等待状态。默认情况下,这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在大型项目中,你可以自己重载这个函数,通过检查变化前后属性和状态,来决定 UI 是否需要更新,能有效提高应用性能。- componentWillUpdate(nextProps, nextState)
如果组件状态或者属性改变,并且上面的 shouldComponentUpdate(...) 返回为 true ,就会开始准更新组件,并调用 componentWillUpdate()。在这个回调中,可以做一些在更新界面之前要做的事情。需要特别注意的是,在这个函数里面,你就不能使用 this.setState 来修改状态。这个函数调用之后,就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。紧接着这个函数,就会调用 render() 来更新界面了。- render()
- componentDidUpdate(prevProps, prevState)
调用了 render() 更新完成界面之后,会调用 componentDidUpdate() 来得到通知
- componentWillUnmount()
当组件要被从界面上移除的时候,就会调用。在这个函数中,可以做一些组件相关的清理工作,例如取消计时器、网络请求等。
生命周期 | 调用次数 | 能否使用 setSate() |
---|---|---|
getDefaultProps | 1(全局调用一次) | 否 |
getInitialState | 1 | 否 |
componentWillMount | 1 | 是 |
render | >=1 | 否 |
componentDidMount | 1 | 是 |
componentWillReceiveProps | >=0 | 是 |
shouldComponentUpdate | >=0 | 否 |
componentWillUpdate | >=0 | 否 |
componentDidUpdate | >=0 | 是 |
componentWillUnmount | 1 | 否 |