react生命周期的理解以及新旧版本的区别

1、生命周期？

何为生命周期？在我看来，就是事物从出生到死亡的过程中会发生一系列的事情。比如人类，出生之前，出生之后，死亡之前和死亡之后等时刻。在出生之前，父母赐予我们名字。死亡之前，我们交代遗言。我们在生命的路程中，在合适的时机做合适的事情。
那么react 也为组件提供了这些时机。 比如 组件将要挂载时。 组件将要被卸载时。等等

2、旧版本生命周期

总结：

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
				1.	constructor()
				2.	componentWillMount()
				3.	render()
				4.	componentDidMount() =====> 常用
						一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
2. 更新阶段: 由组件内部this.setSate()或父组件render触发
				1.	shouldComponentUpdate()
				2.	componentWillUpdate()
				3.	render() =====> 必须使用的一个
				4.	componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
				1.	componentWillUnmount()  =====> 常用
						一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

单个组件时生命周期：

//看实例

		//创建组件
		class Count extends React.Component{

			//构造器
			constructor(props){
				console.log('Count---constructor');
				super(props)
				//初始化状态
				this.state = {count:0}
			}

			//加1按钮的回调
			add = ()=>{  
				//获取原状态
				const {count} = this.state
				//更新状态
				this.setState({count:count+1})
			}

			//卸载组件按钮的回调
			death = ()=>{
				ReactDOM.unmountComponentAtNode(document.getElementById('test'))
			}

			//强制更新按钮的回调
			force = ()=>{
				this.forceUpdate()
			}

			//组件将要挂载的钩子
			componentWillMount(){
				console.log('Count---componentWillMount');
			}

			//组件挂载完毕的钩子
			componentDidMount(){
				console.log('Count---componentDidMount');
			}

			//组件将要卸载的钩子
			componentWillUnmount(){
				console.log('Count---componentWillUnmount');
			}

			//控制组件更新的“阀门”
			shouldComponentUpdate(){
				console.log('Count---shouldComponentUpdate');
				return true
			}

			//组件将要更新的钩子
			componentWillUpdate(){
				console.log('Count---componentWillUpdate');
			}

			//组件更新完毕的钩子
			componentDidUpdate(){
				console.log('Count---componentDidUpdate');
			}

			render(){
				console.log('Count---render');
				const {count} = this.state
				return(
					<div>
						<h2>当前求和为：{count}</h2>
						<button onClick={this.add}>点我+1</button>
						<button onClick={this.death}>卸载组件</button>
						<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
					</div>
				)
			}
		}
		

父子组件中的关系

	//父组件A
		class A extends React.Component{
			//初始化状态
			state = {carName:'奔驰'}

			changeCar = ()=>{
				this.setState({carName:'奥拓'})
			}

			render(){
				return(
					<div>
						<div>我是A组件</div>
						<button onClick={this.changeCar}>换车</button>
						<B carName={this.state.carName}/>
					</div>
				)
			}
		}
		
		//子组件B
		class B extends React.Component{
			//组件将要接收新的props的钩子
			componentWillReceiveProps(props){
				console.log('B---componentWillReceiveProps',props);
			}

			//控制组件更新的“阀门”
			shouldComponentUpdate(){
				console.log('B---shouldComponentUpdate');
				return true
			}
			//组件将要更新的钩子
			componentWillUpdate(){
				console.log('B---componentWillUpdate');
			}

			//组件更新完毕的钩子
			componentDidUpdate(){
				console.log('B---componentDidUpdate');
			}

			render(){ 
				console.log('B---render');
				return(
					<div>我是B组件，接收到的车是:{this.props.carName}</div>
				)
			}
		}

3、新版本的生命周期

总结：

1.初始化阶段: 由ReactDOM.render()触发—初次渲染
	1. constructor()
	2. getDerivedStateFromProps
	3. render()
	4. componentDidMount()
2.更新阶段: 由组件内部this.setSate()或父组件重新render触发
	1. getDerivedStateFromProps
	2. shouldComponentUpdate()
	3. render()
	4. getSnapshotBeforeUpdate
	5. componentDidUpdate()
3.卸载组件: 由ReactDOM.unmountComponentAtNode()触发
	1. componentWillUnmount()

4.总结

常用钩子：

1.render：初始化渲染或更新渲染调用
2.componentDidMount：开启监听, 发送ajax请求
3.componentWillUnmount：做一些收尾工作, 如: 清理定时器

新版本即将废除的钩子（目前只是警告，未来版本出现异步刷新时将会彻底废除）

1.componentWillMount
2.componentWillReceiveProps
3.componentWillUpdate