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

一、es5版实例化取得默认属性 getDefaultProps 外部传入的props初始状态 getInitailState state状态即将挂载 componentWillMount描画VDOM render二、旧版本生命周期加载阶段取得默认属性，初始状态在constructor中完成（运行一次，可读数据，可同步修改state，异步修改state需要setState,setState在实例产生

小手冰凉的007

10522人浏览 · 2021-04-03 10:34:40

小手冰凉的007 · 2021-04-03 10:34:40 发布

一、es5版

实例化

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

二、旧版本生命周期

在这里插入图片描述
加载阶段

取得默认属性，初始状态在constructor中完成（运行一次，可读数据，可同步修改state，异步修改state需要setState,setState在实例产生后才可以使用，可以访问到props）
即将挂载 componentWillMount
描画VDOM render (创建虚拟dom，进行diff算法，更新dom树)
组件渲染之后调用 componentDidMount (一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息) 常用
更新阶段
props改变 componentWillReceiveProps (组件加载时候不调用，组件接受新的props时调用)
shouldComponentUpdate 是否需要更新（return true就会更新dom，false阻止更新）
描画VDOM render (创建虚拟dom，进行diff算法，更新dom树)
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'))

三、新版生命周期

在这里插入图片描述

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

加载阶段

渲染前 static getDerivedStateFromProps(props,state)

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

render

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

componentDidMount 挂载完成后执行

更新阶段

渲染前 static getDerivedStateFromProps(props,state)

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

render

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

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'))