Question

我有一个仅向每个用户显示提示的组件。让我们称之为<Hint />。

在渲染组件时，我正在寻找confirmed: boolean。如果其为false，则组件应呈现。如果为true，则该组件完全不应呈现。

那很容易使用

function Hint(confirmed: boolean) {
   if(confirmed) return null;
   return (
      <Example>
          <Text>I am a super helpful hint.</Text>
          <Button title="Okay" onClick={this.hideHint} />
      </Example>
}

但是事实证明，我的<Example />有一个我想要保留并显示的漂亮的淡出动画。

如果<Hint />，我如何告诉我的confirmed === true组件根本不渲染，如果是false并得到true，则如何保留它以保留动画？

我可以使用ComponentDidMount()之类的东西吗？我使用react native的生命周期方法感到非常不安全。

Answer 1

提示是一个无状态组件，它将在其父对象每次渲染时重新渲染。

如果要避免多次重新渲染，可以实现有状态组件，只有在更改道具或组件状态时才会重新渲染。

要获得对重新渲染的更多控制，可以在有状态组件中实现shouldComponentUpdate方法。

如何防止组件在动画中反应后渲染

1 个答案: