一、Taro生命周期使用不正确引起的props未更新
在父组件中放置了一个弹窗组件,传入两个值,这两个值(typeList和detailList)分别
- 在父组件的componentDidMount生命周期中调用接口获得(typeList)
- 在弹窗的点击打开按钮中通过调用接口获得(detailList)
想在弹窗组件的componentDidMount方法中,通过this.props获取到detailList,问题是:
- this.props.detailList为空对象,但是this.props.typeList是有值的,
通过分析发现:
- 倘若在弹窗组件的componentDidMount方法中,有一个异步函数,问题不会出现
- 倘若在弹窗组件中,没有异步函数,通过分别detailList的接口调用回调函数中打印“父组件”, 以及在弹窗组件componentDidMount生命周期中打印“子组件",会发现控制台”子组件“出现 比"父组件"早;如果有异步函数,会发现先输出”父组件“, 在输出"子组件"
结论:
- 首次渲染组件,props还没有detailList最新的值,因此需要在props更新后,在更新一次。由于是类组件,那应该去找生命周期
解决方案:
- 在componentDidUpdate生命周期中通过比较当前的props与前一个props,如果不同,说明props有更新,需要执行业务代码。
componentDidUpdate(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any) {
if(this.props.detailList !== prevProps.detailList) {
// 业务逻辑
}
}
二、重复渲染的问题
在找解决方案的时候,这两个官方文档给了我一些启发,之前看是看不太明白的,还是得带着问题去看文档
关于state的使用:
因此:
在组件内使用的数据(为减少不必要的渲染):
1. 如果需要在render中使用,需要触发渲染,则使用state
2. 如果不需要触发渲染,直接定义变量,通过this.变量名调用