目录React生命周期常用的生命周期不常用的生命周完整的生命周期图react生命周期 函数组件无生命周期,生命周期只有类组件才拥有 生命周期函数指在某一时刻组件会自动调用并执行的函数
函数组件无生命周期,生命周期只有类组件才拥有
例如:我们希望在第一次将其呈现到DOM时设置一个计时器Clock。这在React中称为“安装”。我们也想在删除由产生
的DOM时清除该计时器Clock。这在React中称为“卸载”。
一般分为:挂载、更新、卸载
constructor( props)
React组件的构造函数在挂载之前被调用。在实现React.Component构造函数时,需要先在添加其它内容前,调用super(props),用来将父组件传来的props绑定到继承类中。只调用一次
constructor(props) {
// 如果你在定义组件中有定义构造函数,则一定要调用super方法来调用父类的构造函数
super(props)
// todo …
}
static getDerivedStateFromProps(nextProps, prevState)挂载前
此方法是react16.3之后新增,会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state,如果返回 null 则不更新任何内容。
此方法适用于罕见的用例,即当前组件的 state 的值在任何时候都取决于 props传入。
{}|null
, 使用此方法一定要先定义好state,否则报错如果你想用此方法,把props中的属性数据,追加到state中,后续能修改,则这样的操作,你要确保只执行1次
state+props合并后和原state中的数据个数一样,在第1次手动添加一个标识
参数1:nextProps: 当前最新的props数据
参数2:nextState:当前最新的state数据,暂时不包含你返回值中要对state修改的值
快捷输入 gdsfp
state = {
num: 0
};
render() {
return <div>当前的num是{this.state.num}</div>;
}
// 从props中获取数据,绑定到当前的这个组件中的state
// nextProps 父组件传递过来的整个props对象
// prevState 当前组件中的状态对象state
static getDerivedStateFromProps(nextProps, prevState) {
// 不需要更新当前state
return null
}
render()渲染
render()方法是必需的,它主要负责组件的渲染,会被重复调用若干次
componentDidMount()挂载
它会在组件挂载后(插入 DOM 树中)立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据,此处是实例化请求的好地方。
componentDidMount() {
console.log('child -- componentDidMount')
}
getSnapshotBeforeUpdate(prevProps, prevState)更新时
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('child --- getSnapshotBeforeUpdate')
return 100
}
mponentDidUpdate(prevProps, prevState, snapshot)更新完毕
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('child --- getSnapshotBeforeUpdate', snapshot)
}
componentWillUnmount()销毁组件
// 销毁组件时执行
componentWillUnmount(){
console.log('child --- componentWillUnmount')
}
继承PureComponent类组件
shouldComponentUpdate(nextProps, nextState)优化更新周期钩子函数
shouldComponentUpdate(nextProps, nextState) {
console.log(this.props, nextProps)
// 针对于要比较的字段进行判断
if (this.props.num.data === nextProps.num.data) {
return false
}
return true
}
深层次用这个lodash提供的方法
深层比对,它比对的是对象中属性的值,如果全局的值一样则为true,否则为false:_.isEqual(this.props, nextProps)
shouldComponentUpdate(nextProps, nextState) {
return !_.isEqual(this.props, nextProps)
}
当 props 或 state 发生变化时,shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true则组件继续渲染,为false则当前组件不会渲染。首次渲染或使用 forceUpdate() 时不会调用该方法。此方法仅作为性能优化的方式而存在。你也可以考虑使用内置的 PureComponent 组件,而不是手动编写 shouldComponentUpdate()。PureComponent 会对 props 和 state 进行浅层比较,并减少了跳过必要更新的可能性。
当this.setState()修改了state中的数据后,当前组件将重新渲染,同时也会重新渲染子组件,但只会渲染当前组件子树(当前组件以其所有子组件)
到此这篇关于React中的生命周期详解的文章就介绍到这了,更多相关React生命周期内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: React中的生命周期详解
本文链接: https://www.lsjlt.com/news/168335.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0