getDerivedStateFromProps / shouldComponentUpdate 结合使用,保护子组件不受父组件非必要的render影响

记录一下逻辑

遇到一个问题, 用某个第三方的组件时, 有其他的stata触发了render, 导致该三方组件进行了渲染, 从容在UI上发现异常, 为了保护该第三方组件不收其他影响, 同时要确保该第三方组件的正常逻辑功能可用, 我们可以用 getDerivedStateFromProps 来进行逻辑处理, 必要时更新state , 用shouldComponentUpdate 来决定必要时进行render,

解释下逻辑,

1. 要支持 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),
              ...