停止在本机反应中重新渲染特定视图答案

【问题标题】：Stop Re-rendering a particular View in react native停止在本机反应中重新渲染特定视图
【发布时间】：2019-03-21 17:30:25
【问题描述】：

当状态发生变化时，如何停止重新渲染特定视图？我正在使用来自react-native-timer-countdown 的计时器倒计时组件。到期后会发生什么，我正在设置一个新状态。所以当有一个新的状态时，它会重新渲染。所以计时器从头开始。

库本身建议使用两个独立的组件。但是，我不觉得那是一件好事。有什么方法可以停止计时器在完成后重新启动（即使在状态更改时）？

我的代码：

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

OnExpire ，有一个 setstate 再次重新启动计时器。请推荐

【问题讨论】：

标签： javascript react-native timer

【解决方案1】：

React Native 中的一个好习惯是有一个父组件，有时称为智能组件，通常是基于类的组件，

它的工作是编辑 - 获取数据并做出任何合乎逻辑的决定。 - 相应地渲染子组件。

这些子组件有些人称之为哑组件，通常是一个展示组件或一个功能组件，它的工作是从它的名字来呈现一些内容只改变它收到的一个道具

所以我建议你将你不想受到状态变化影响的 JSX 封装在一个函数式组件中。这样，如果状态的变化没有作为道具传递给它，它就不会被渲染。

在下面的代码中，如果state中的field2发生了变化，PresentationalComponent将不会重新渲染

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

【讨论】：

【解决方案2】：

不确定您要达到什么目的。我认为你可以有几个选择：

使用两个组件（我认为这是个好主意）
让他们将PureComponent 用于TimerCountdown（或实施shouldComponentUpdate）
这个倒计时你自己写（我想当你完全自己写的时候，你会找到办法的）

【讨论】：

纯组件有什么例子吗？
class TimerCountdown extends React.PureComponent { ... } 或者你可以将他们的组件包装到你的 PureComponent
PureComponent 提供旧状态或道具与新状态或道具之间的浅层比较，如果它们相同，则不会渲染。但是，它会在父组件发生变化时重新渲染
你没有改变TimerCountdown的状态和道具，对吧？所以它不会被重新渲染

【解决方案3】：

这个包我也有这个问题。

我通过删除它并编写自己的组件来解决它。

参考我的这个答案，我解释了我的工作。

timer count down re-rendering and leaking problem

它对我来说很好，我希望它可以帮助你并解决你的问题。

【讨论】：