react的生命周期函数（超详细）

一、es5版

实例化

1. 取得默认属性 getDefaultProps 外部传入的props
2. 初始状态 getInitailState state状态
3. 即将挂载 componentWillMount
4. 描画VDOM render

二、旧版本生命周期

加载阶段

1. 取得默认属性，初始状态在constructor中完成（运行一次，可读数据，可同步修改state，异步修改state需要setState,setState在实例产生后才可以使用，可以访问到props）

2. 即将挂载 componentWillMount

3. 描画VDOM render (创建虚拟dom，进行diff算法，更新dom树)

4. 组件渲染之后调用 componentDidMount (一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息) 常用
   更新阶段

5. props改变 componentWillReceiveProps (组件加载时候不调用，组件接受新的props时调用)

6. shouldComponentUpdate 是否需要更新（return true就会更新dom，false阻止更新）

7. 描画VDOM render (创建虚拟dom，进行diff算法，更新dom树)

8. componentDidUpdate 组件数据更新完成后调用

卸载阶段
compoenentWillUnmount (即将卸载，可以做一些组件相关的清理工作，如青春计时器、网络请求等 )常用

组件卸载： unmountComponentAtNode(document.getElementById('root'))

所有子组件挂载完成，才标记着父组件挂载完成，父组件更新，子组件更新，子组件更新，子组件不更新

//创建组件
		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>
				)
			}
		}
		
		//渲染组件
		ReactDOM.render(<Count/>,document.getElementById('root'))

三、新版生命周期

1. 在React16新的生命周期弃用了compostWillMount、componentWillReceiveProps、componentWillUpdate
2. 新增了getDerivedStateFromProps、getSonapshotBeforeUpdate来替代弃用的三个钩子函数(compostWillMount、componentWillReceiveProps、componentWillUpdate)

加载阶段

1. 渲染前 static getDerivedStateFromProps(props,state)

无法访问this
props,state是更新后的
必须返回一个对象，用来更新state或者null 不更新
必须要初始化state
场景：state的值在任何时候都取决于props时

2. render

必须return jsx|string|number|null
不会直接于浏览器交互：不要操作DOM｜和数据

3. componentDidMount 挂载完成后执行

更新阶段

1. 渲染前 static getDerivedStateFromProps(props,state)

无法访问this
props,state是更新后的
必须返回一个对象，用来更新state或者null 不更新
必须要初始化state
场景：state的值在任何时候都取决于props时

2. render

必须return jsx|string|number|null
不会直接于浏览器交互：不要操作DOM｜和数据

3. getSnapshortBeforeUpdate(prevProps,prevState)

组件能在发生更改之前从DOM中捕获一些信息(dom渲染前的状态)
返回 值｜null 会给componentDidUpdate
prevProps、prevState 更新前this.props、this.state更新后

销毁阶段
componentWillUnmont组件即将卸载执行

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()
			}
			
			//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
			static getDerivedStateFromProps(props,state){
				console.log('getDerivedStateFromProps',props,state);
				return null
			}

			//在更新之前获取快照
			getSnapshotBeforeUpdate(){
				console.log('getSnapshotBeforeUpdate');
				return 'atguigu'
			}

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

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

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

			//组件更新完毕的钩子
			componentDidUpdate(preProps,preState,snapshotValue){
				console.log('Count---componentDidUpdate',preProps,preState,snapshotValue);
			}
			
			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>
				)
			}
		}
		
		//渲染组件
		ReactDOM.render(<Count count={199}/>,document.getElementById('root'))