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),
              ...