记录一下逻辑
遇到一个问题, 用某个第三方的组件时, 有其他的stata触发了render, 导致该三方组件进行了渲染, 从容在UI上发现异常, 为了保护该第三方组件不收其他影响, 同时要确保该第三方组件的正常逻辑功能可用, 我们可以用 getDerivedStateFromProps 来进行逻辑处理, 必要时更新state , 用shouldComponentUpdate 来决定必要时进行render,
解释下逻辑,
- 要支持 props.goodmorningData 可能没有, 需要响应
2.要支持 props.goodmorningData 可能数据存在, 需要响应
3.要支持 props.goodmorningData 数据存在变化,需要响应
以上三个情况下支持render后, 其父组件的其他state变化就不再对该子组件进行影响, 该子组件只关心其父组件的state.goodmorningData 对其的影响
state及 props
interface Props {
goodmorningData: any,
}
interface State {
goodmorningData: any
}
getDerivedStateFromProps 及 shouldComponentUpdate
// 是否更新state: (通过比较nextProps.goodmorningData 与 prevState.goodmorningData 的差异) 在此处决定
static getDerivedStateFromProps(nextProps: any, prevState: any) {
// 数据从无到有 - 更新state
if (nextProps.goodmorningData.data && nextProps.goodmorningData.data.length > 0 && !prevState.goodmorningData.data) {
return {goodmorningData: nextProps.goodmorningData};
}
// 数据从有到无- 更新state
if (!nextProps.goodmorningData.data && prevState.goodmorningData.data && prevState.goodmorningData.data.length > 0) {
return {goodmorningData: nextProps.goodmorningData};
}
// 数据存在且数据变化 更新sate
if (nextProps.goodmorningData.data && nextProps.goodmorningData.data.length > 0 && prevState.goodmorningData.data && prevState.goodmorningData.data.length > 0) {
let nextP = JSON.stringify(nextProps.goodmorningData);
let privS = JSON.stringify(prevState.goodmorningData);
if (nextP !== privS) {
return {goodmorningData: nextProps.goodmorningData};
}
}
}
// 是否进行render: (通过比较nextProps.goodmorningData 与 this.props.goodmorningData的差异) 在此处决定
shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>, nextContext: any): boolean {
// 数据从无到有 - 进行render
if (!this.props.goodmorningData.data && nextProps.goodmorningData.data && nextProps.goodmorningData.data.length > 0) {
return true;
}
// 数据从有到无 - 进行render
if (this.props.goodmorningData.data && this.props.goodmorningData.data.length > 0 && !nextProps.goodmorningData.data) {
return true;
}
// 数据存在且数据变化 - 进行render
if (nextProps.goodmorningData.data && nextProps.goodmorningData.data.length > 0 && this.props.goodmorningData.data && this.props.goodmorningData.data.length > 0) {
let nextP = JSON.stringify(nextProps.goodmorningData);
let privP = JSON.stringify(this.props.goodmorningData);
if (nextP !== privP) {
return true;
}
}
return false;
}
render
render() {
let {weekDay, data, morningId, releaseDate} = this.state.goodmorningData;
if (data && data.length > 0) {
return (
<TouchableOpacity onPress={() => this.props.goodmorningOnpress(morningId)}>
<ImageBackground
source={Images.home_goodmoring_shadow}
style={{
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
width: app.width,
height: px2dp(277),
paddingHorizontal: px2dp(30),
...