React.Component 钩子函数

本文详细介绍了React.Component的各种生命周期钩子函数,包括constructor、componentWillMount、componentDidMount、componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、getSnapshotBeforeUpdate、componentDidUpdate、componentWillUnmount和componentDidCatch,以及它们在不同场景下的应用和最佳实践。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.constructor(props, context)

构造函数,在创建组件的时候调用一次。
2.componentWillMount()

在组件render之前立即调用
Tip1: 不建议在此请求数据,由于请求数据接口一般都是异步,这时候render已经被执行,建议在componentDidMount 数据

Tip2: 如果在服务端渲染,该钩子函数将被调用两次,一次服务端,一次浏览器端,而componentDidMount函数只会在浏览器端请求一次

Tip3: 在taro构建的小程序里对应的生命周期是 onLoad。

3…componentDidMount()

所有的组件(包括子组件)在render执行完之后立即调用,并且只会被调用一次。
Tip: 建议在此请求数据

  1. componentWillReceiveProps(nextProps)

在props被改变时被触发,初始化render时不调用。
旧的属性还是可以通过this.props来获取,在这里通过调用this.setState()来更新你的组件状态。
Tip1: 某些情况下,props没变也会触发该钩子函数,需要在方法里手动判断一下this.props和nextProps是否相同,不相同了才执行我的更新方法。

Tip2:该函数一般用来更新依赖props的状态

  1. shouldComponentUpdate(nextProps, nextState)

发生重渲染时,在render()函数调用前被调用的函数,当函数返回false时候,阻止接下来的render()函数的调用,阻止组件重渲染,而返回true时,组件照常重渲染。
该方法并不会在初始化渲染或当使用forceUpdate()时被调用。
6.componentWillUpdate(nextProps, nextState)

shouldComponentUpdate返回true或者调用forceUpdate之后,componentWillUpdate会被调用。
7. getSnapshotBeforeUpdate(prevProps, prevState)

该函数在最新的渲染输出提交给DOM前将会立即调用。它让你的组件能在当前的值可能要改变前获得它们。这一生命周期返回的任何值将会 作为参数被传递给componentDidUpdate()。
8. componentDidUpdate(prevProps, prevState)

除了首次render之后调用componentDidMount,其它render结束之后都是调用componentDidUpdate。
9.componentWillUnmount()

在组件被卸载和销毁之前立刻调用。可以在该方法里处理任何必要的清理工作,例如解绑定时器,取消网络请求,清理任何在componentDidMount环节创建的DOM元素。
10.componentDidCatch(error, info)

该函数称为错误边界,捕捉发生在子组件树中任意地方的JavaScript错误,打印错误日志,并且显示回退的用户界面。
Tip:错误边界只捕捉树中发生在它们之下组件里的错误。一个错误边界并不能捕捉它自己内部的错误。

11.render()

render是一个React组件所必不可少的核心函数(上面的其它函数都不是必须的)。
Tip:记住,不要在render里面修改state。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值