react 生命周期

最新推荐文章于 2024-04-16 14:43:28 发布

原创最新推荐文章于 2024-04-16 14:43:28 发布 · 321 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

11 篇文章

订阅专栏

本文深入解析了React组件的各个生命周期方法，包括constructor、render、componentWillMount、componentDidMount等，阐述了它们的调用时机及用途，如网络请求、状态更新和组件卸载等关键操作。

constructor

这个就不介绍了，可能有时间会写

static getDerivedStateFromProps

static  getDerivedStateFromProps(){
//组件实例化之后接收到一个新属性(props)时调用该函数，该函数返回一个对象来更新状态(state)
//修改state时一般不会触发该函数，父组件重新渲染该函数一定会被调用
}

render

这个也是一样

componentWillMount

组件在渲染之前调用(render)
componentWillMount react17之前会保留，17之后的版本不会再用
17之后改名为 UNSAFE_componentWillMount，不安全的，容易出问题，尽量不要使用，一般使用constructor代替改函数

componentDidMount

组件渲染完毕后调用，这里可以获取到真实的DOM节点，一般在该函数内部做网络请求

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState){
	//数据发生改变，组件更新之前触发改函数，接收两个参数，更新后的props，和更新的state
	return true //return true时允许更新  return false 不能阻止组件的更新  总之没什么用
	//未来的react想将该函数作为状态观察函数，主要是作为数据观察，并不是真的想让它用来更新
}

UNSAFE_componentWillUpdate

UNSAFE_componentWillUpdate(nextProps, nextState){
	//当数据发生改变时，触发该函数，在组件重新渲染之前被调用
	//这里不能修改state，会造成死循环
	//react 17之前称为componentWillUpdate
	//一般用getDerivedStateFromProps()（新的生命周期）代替
}

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(nextProps, nextState){
	//数据发生改变,render函数被调用,还没渲染成真实DOM时被调用
	//该函数可以返回任意数据类型的数据作为参数传递给 componentDidUpdate
	return 1
}

componentDidUpdate

componentDidUpdate(nextProps, nextState,Snapshot){
	//Snapshot 是从getSnapshotBeforeUpdate传过来的参数
	//数据发生改变，页面渲染完毕调用该函数，在这里可以对更新后的DOM进行逻辑操作
}

UNSAFE_componentWillReceiveProps

UNSAFE_componentWillReceiveProps(nextProps, nextState){
	//组件接收到新属性时触发该函数，一般不怎么用，这里可以修改state
}

componentWillUnMount

componentWillUnMount(){
	//组件注销之前，一般在这里做清理工作，将组件内绑定的监听注销
	//取消网络请求,取消任何在componentDidMount创建的DOM元素
}