react（四）组件的生命周期

最新推荐文章于 2020-07-02 20:42:39 发布

晓萌的百宝袋

最新推荐文章于 2020-07-02 20:42:39 发布

阅读量328

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/xiaozidewawa/article/details/77930704

版权

react 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

组件的生命周期：

装载过程（Mount）：也就是把组件第一次在DOM树中渲染的过程。
更新过程（Update）：当组件被重新渲染的过程
卸载过程（Unmount）：组件从DOM中删除的过程

一、装载过程（Mount）

当组件第一次渲染时，依次调用的过程：

1、constructor【*】

（1）不是所有组件均会定义该函数
（2）定义该函数的目的：

初始化state

this.state={}

绑定当前组件的成员函数的this指向

例如，已有成员函数clickBtn，绑定this指向的方式可以是this.clickBtn=this.clickBtn.bind(this)。

2、getInitalState

已经过时的方法，不再推荐使用。

取而代之的方式是： 在es6语法定义中，在constructor中初始化state。

3、getDefaultPropTyes

已经过时的方法，不再推荐使用。

取而代之的方式是： 在es6语法定义中，通过给当前组件类属性（不是类的实例对象属性）defaultProps赋值指定props的初始值。

例如，组件类名是Carouse ，那么指定props初始值的方式是Carouse.defaultProps={}

4、componentWillMount

（1）通常不用定义，因为此时还没有渲染出来任何东西，即使修改状态也不会引发重新绘制，可将这里需要定义的事情，都提前到constructor中。

（2）既可在浏览器端使用，又可在服务器端使用

5、render【* * * *】

该函数决定了该渲染什么。
React生命周期函数中要求有返回结果的函数之一，**返回值：**用于构造DOM对象。

（1）render是一个纯函数，完全根据this.state和this.props来决定返回的结果，而不要产生任何副作用。

【render函数中去调用this.setState无疑是错误的，因为一个纯函数不应该引起状态的改变】

（2）render函数并不做实际的渲染动作，它只返回一个jsx描述的结构，最终由React来操作渲染过程。

（3）当某些组件的作用不是渲染界面，或者组件的某些情况下选择没有东西可画，那就让render函数返回一个null或者false。

6、componentDidMount【* * *】

（1）该函数的执行并不是在render函数被调用完之后立刻调用，而是在整个组件被装载到了DOM树上之后才执行，即 React利用全部的render返回的jsx描述的结构进行了渲染之后才执行。

（2）只能在浏览器端使用

（3）常用场景：

通过ajax获取数据来填充组件的内容
可以执行jQuery代码，这里只处理了装载过程的jquery代码，要完全和jQuery结合，要考虑React的更新过程中的componentDidUpdate。

7、整个装载过程举例：


import React,{Component} from 'react';

export default class Mount extends Component{
	// 1.1 constructor【*】
	
	constructor (props){
		super(props);
		// 绑定成员函数的this环境
		this.fn1=this.fn1.bind(this);
		// 初始化state
		this.state={
			
		}
	}
	// 1.2 getInitialState
	
	// 注意：ES6方法定义的react组件是用不到的，等同于this.state
	getInitialState(){
		
	}
	// 1.3 getDefaultProps
	
	// 注意：ES6方法定义的react组件是用不到的，等同于给类属性defaultProps设置props初始值，Mount.defaultProps
	
	getDefaultProps(){
		
	}
	// 1.4 componentWillMount
	
	componentWillMount(){
		
	}
	// 1.5 render【**】
	
	render(){
		return (
			<div></div>
		)
	}
	// 1.6 componentDidMount【***】
	
	componentDidMount(){
		
	}
	
	// 其他：
	
	// 成员函数fn1
	fn1(){
		
	}
}

// 通过给组件Mount 类 属性defaultProps设置，用于props设置初始值
Mount.defaultProps={
	
};