7-react-生命周期钩子(新)

官方文档讲解生命周期：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

---

 

生命周期钩子

生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子

由Windows在某个时机调用的函数，我们可以重写钩子中的方法，以达到在这个时机做什么事情的目的，我们自己是无法调用这些钩子的

常用的钩子

 

constructor（props）

构造器钩子，有以下两个作用

• 初始化this.state
• 函数方法绑定到实例。

但是state可以直接写在类体中，ES6新语法又可以使用箭头函数绑定实例对象，所以，构造器函数我们经常不用写。

但是，我们不写意为着它不执行，在执行时react会自动调用。

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

getDerivedStateFromProps(props,state)

getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

此方法适用于罕见的用例，即 state 的值在任何时候都取决于 props。

render()

render() 方法是 class 组件中唯一必须实现的方法。

render() 函数应该为纯函数，这意味着在不修改组件 state 的情况下，每次调用时都返回相同的结果，并且它不会直接与浏览器交互。

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

componentDidMount()

componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。

这个钩子经常使用，比如在这里进行消息订阅，触发定时器等，但注意记得在componentWillUnmount中取消，不然会有错误。

//组件挂完毕
componentDidMount(){
	console.log('componentDidMount');
	this.timer = setInterval(() => {
		//获取原状态
		let {opacity} = this.state
		//减小0.1
		opacity -= 0.1
		if(opacity <= 0) opacity = 1
		//设置新的透明度
		this.setState({opacity})
	}, 200);
}

shouldComponentUpdate()

根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。

此方法仅作为性能优化的方式而存在。不要企图依靠此方法来“阻止”渲染，因为这可能会产生 bug。你应该考虑使用内置的 PureComponent 组件，而不是手动编写 shouldComponentUpdate()。PureComponent 会对 props 和 state 进行浅层比较，并减少了跳过必要更新的可能性。

getSnapsshotBeforeUpdate()

getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。

componentDidUpdate(prevProps,prevState,snapShot)

componentDidUpdate() 会在更新后会被立即调用。首次渲染不会执行此方法。

componentDidUpdate(prevProps) {
  // 典型用法（不要忘记比较 props）：
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

componentWillUnmount()

componentWillUnmount() 会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

//组件将要卸载
componentWillUnmount(){
	//清除定时器
	clearInterval(this.timer)
}