停止以本機方式重新呈現特定視圖

Question

如何在狀態發生變化時重新渲染特定視圖？ 我正在使用來自react-native-timer-countdown的Timer倒計時組件。 結果是在到期后，我正在設置一個新狀態。 所以當有一個新的狀態時，它就會重新出現。 所以計時器從頭開始。

圖書館本身建議使用兩個獨立的組件。 但是，我覺得這不是一件好事。 有沒有辦法在完成后停止計時器重啟（即使在狀態改變時）？

我的代碼：

<View>
    <TimerCountdown
      initialMilliseconds={100 * 60}
      onTick={(milliseconds) => console.log("tick", milliseconds)}
      onExpire={() => this.setState({ disabled: false })}
    />
</View>

OnExpire，有一個setstate再次重啟計時器。 請建議

Answer 1

不確定你想要達到什么目的。 我想你可以選擇幾個：

• 使用兩個組件（我認為這是一個好主意）
• 讓他們使用PureComponent進行TimerCountdown （或實現shouldComponentUpdate ）
• 自己寫這個倒計時（我想你會找到一種方法，當你完全自己寫它時如何制作它）

Answer 2

我也遇到過這個問題。

我通過刪除它並編寫自己的組件來解決它。

參考我的這個答案，我解釋了我的工作。

計時器倒計時重新渲染和泄漏問題

它對我來說很好，我希望它能幫到你並解決你的問題。

Answer 3

React Native的一個好習慣是擁有一個父組件，有時稱為智能組件，通常是基於類的組件，

它的工作是編輯 - 獲取數據並做出任何邏輯決策。 - 相應地渲染子組件。

這些子組件有些人稱之為Dumb Component ，通常是一個表示組件或一個功能組件，從它的名稱起作用的工作只是改變一些內容只是改變它的道具收到的

因此，我建議您封裝不希望受功能組件中狀態更改影響的JSX。 這樣，如果狀態的變化沒有作為支柱傳遞給它，它將不會被渲染。

在下面的代碼中，如果state中的field2已更改，則不會重新PresentationalComponent

class ParentComponent {
  render() {
    const { field1, field2 } = this.state;
    return (
      <View>
        ...
        <PresentationalComponent prop1={field1} />
        ...
      </View>
    );
  }
}