如何防止动画后的组件渲染

Question

I have got a component which displays a hint only a single time to each user. Lets call it <Hint /> .

While rendering the component, I am looking for a confirmed: boolean . If its false , the component should render. If true , the component should not render at all.

Thats done easily using

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>
}

But turns out, my <Example /> has a beautiful fade-out animation I want to keep and display.

How can I tell my <Hint /> component to not render at all if confirmed === true , but keep it if it was false and gets true , to keep the animation?

Can I use something like ComponentDidMount() ? I feel very insecure using the lifecycle methods from react native.

Answer 1

Hint is a stateless Components , it'll be re-rendered each time his parent renders.

If you want to avoid multiple re-renders you can implement a stateful component , that'll only re-render when you change the props or the state of the component.

For even more control on the re-render, you can implement the shouldComponentUpdate method in your statefull component.