React 中的生命周期 -- 分为三大部分
<h3>1 - 实例化 / 挂载阶段 </h3>
constructor() 进行构造初始化 接收 props 和 context 使用这两个参数必须在内部使用 super() 传入对应参数
UNSAFE_componentWillMount() 数据已经初始化完成, 还没渲染到 dom 上
render() 渲染阶段, 这里会通过 jsx 进行创建虚拟 dom 并返回, 这里通常会访问到 props 和 state 并且决定该如何渲染到页面. 另外这里是不应该调用 setState() 的.
componentDidMount() 数据已经渲染挂载完成, 一般在这里发送请求
<h3>2 - 存在期 / 更新期 </h3>
componentWillReceiveProps (nextProps) 接收一个参数 nextProps,props 传递给 Component 实例时, 将调用此方法, 通常用于对比新旧数据后进行 this.state 的处理
shouldComponentUpdate(nextProps, nextState) 可以查看当前和新的 props&state, 并选择是否继续前进, 从而防止不必要的渲染, 相当于一个拦截, 必须返回一个布尔值
componentWillUpdate(nextProps 和 nextState) 一旦确定需要在更新阶段重新渲染 componentWillUpdate 就会调用. 相当于数据更新前执行的函数, 是我们处理配置更改并为下一次渲染做准备的时机
render 再次进行数据的渲染 每次数据更新都会使用 react 的 diff 算法对比更新前后的 dom 树, 并且重新渲染
componentDidUpdate(prevProps, prevState) 数据更新后, 重新渲染完成后执行, prevProps, prevState 就是更新前的 props 和 state.componentDidUpdate 在初始化 render 的时候不会执行, 这里需要谨慎的使用 setState 避免死循环
<h3>3 - 销毁期 </h3>
componentWillUnmount () 在此处完成组件的卸载和数据的销毁. 一般需要在这里销毁定时器, 事件监听等
00.PNG
- import React, { Component } from 'react'
- import Apps3 from './apps3';
- export default class apps2 extends Component {
- constructor(p){
- super(p)
- this.state={
- title:'原始的标题',
- ChildTitle:'好日子'
- }
- console.log('1 - 构造初始化的函数');
- }
- changeTitle(){
- this.setState({
- ChildTitle:'无敌好日子'
- })
- }
- change(){
- this.setState({
- title:'新的标题'
- })
- }
- UNSAFE_componentWillMount(){
- console.log('2 - 准备渲染')
- }
- componentDidMount(){
- console.log('4 - 已经渲染完成')
- }
- render(){
- console.log('3 - 渲染阶段 /2-3 更新渲染');
- return(
- <div>
- <h1>{this.state.title}</h1>
- <button onClick={this.change.bind(this)}> 按钮 </button>
- <button onClick={this.changeTitle.bind(this)}> 改变子组件标题 </button>
- <Apps3 title={this.state.ChildTitle}></Apps3>
- </div>
- )
- }
- shouldComponentUpdate(nextProp,nextState){
- console.log(nextState)
- console.log(nextProp)
- console.log('2-1 更新阶段 - 询问可否更新')
- return this.state.title !== nextState
- }
- UNSAFE_componentWillUpdate(){
- console.log('2-2 更新阶段 - 数据准备更新')
- }
- componentDidUpdate(){
- console.log('2-4 - 更新阶段, 数据已经更新并渲染完成')
- }
- }
来源: http://www.jianshu.com/p/1dbf56eb42a3