[英]Stop Re-rendering a particular View in react native
How to stop, a particular view from re rendering when there is an state change ? 如何在状态发生变化时重新渲染特定视图? I am using a Timer countdown component from react-native-timer-countdown .
我正在使用来自react-native-timer-countdown的Timer倒计时组件。 What happens is after expiry, i am setting an new state.
结果是在到期后,我正在设置一个新状态。 So when there is an new state, it rerenders.
所以当有一个新的状态时,它就会重新出现。 So the timer starts from beginning.
所以计时器从头开始。
The library itself suggest to use two separate component. 图书馆本身建议使用两个独立的组件。 But, i dont feel thats a good.
但是,我觉得这不是一件好事。 Is there any way to stop the timer to restart once done ( even at state change ) ?
有没有办法在完成后停止计时器重启(即使在状态改变时)?
My Code : 我的代码:
<View>
<TimerCountdown
initialMilliseconds={100 * 60}
onTick={(milliseconds) => console.log("tick", milliseconds)}
onExpire={() => this.setState({ disabled: false })}
/>
</View>
OnExpire , there is an setstate which restarts the timer again. OnExpire,有一个setstate再次重启计时器。 Please suggest
请建议
Not sure what are you trying to achieve. 不确定你想要达到什么目的。 I think you can a couple of options:
我想你可以选择几个:
PureComponent
for TimerCountdown
(or implement shouldComponentUpdate
) PureComponent
进行TimerCountdown
(或实现shouldComponentUpdate
) I had this problem with this package too. 我也遇到过这个问题。
I solved it by removing it and writing my own component. 我通过删除它并编写自己的组件来解决它。
refer to this answer of mine, I explained my work. 参考我的这个答案,我解释了我的工作。
timer count down re-rendering and leaking problem 计时器倒计时重新渲染和泄漏问题
It's working fine for me ,I hope it help you and solve your problem too. 它对我来说很好,我希望它能帮到你并解决你的问题。
A good practice in React Native is to have a parent component, which is called sometimes Smart Component usually class-based component, React Native的一个好习惯是拥有一个父组件,有时称为智能组件,通常是基于类的组件,
It's job is to ed - to fetch data and make any logical decisions. 它的工作是编辑 - 获取数据并做出任何逻辑决策。 - render child components accordingly.
- 相应地渲染子组件。
these child components some people call it Dumb Component , usually a presentational component or a funtional component, it's job from it's name to render some content only a change to ony of it's props received 这些子组件有些人称之为Dumb Component ,通常是一个表示组件或一个功能组件,从它的名称起作用的工作只是改变一些内容只是改变它的道具收到的
So I suggest you encapsulate the JSX that you don't want to be affected by the change in your state in a functional component. 因此,我建议您封装不希望受功能组件中状态更改影响的JSX。 That way it will not be rendered if the change in state has not been passed as a prop to it.
这样,如果状态的变化没有作为支柱传递给它,它将不会被渲染。
in the code below, if field2 in state
has changed, PresentationalComponent
will not rerendered 在下面的代码中,如果
state
中的field2已更改,则不会重新PresentationalComponent
class ParentComponent {
render() {
const { field1, field2 } = this.state;
return (
<View>
...
<PresentationalComponent prop1={field1} />
...
</View>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.