web-dev-qa-db-fra.com

React-native: Conserver les valeurs animées dans l'état ou en tant que propriété de classe?

Est-il préférable de conserver la valeur animée (fadeAnim) en tant que propriété de l'état ou est-il correct d'en faire une propriété de classe?

Exemple:

class ModalShade extends React.Component {
    fadeAnim = new Animated.Value(0)

    render() {
        return (
            <Animated.View
                cls="bg-black absolute-fill"
                style={{ opacity: this.fadeAnim }}
            />
        )
    }

    componentDidMount() {
        Animated.spring(
            this.fadeAnim, {
                toValue: 0.6,
                tension: 100,
                friction: 20
            }
        ).start();
    }
}

Clarification: Je sais que cet état est utilisé pour la réconciliation de react. Les valeurs 'Animated React-native contournent le rendu () habituel, donc le composant est mis à jour même lorsqu'il n'y a pas de changement d'état.

Je ne vois aucun intérêt à comparer un Animated.Value dans mon shouldComponentUpdate, c'est pourquoi je l'ai déplacé.

reactjsreact-nativeecmascript-6
29
Fabian Zeindl

Il est préférable de suivre la documentation officielle et d'utiliser la propriété de l'État. Il y a deux bonnes raisons à cela:

  1. Vous souhaitez conserver tout ce qui a un effet sur le rendu d'un composant dans votre état/accessoires/contexte.
  2. La bibliothèque animée React-Native a ses propres optimisations qui permettent d'éviter les appels setState et le rendu lors du changement de composants animés. Ceci est une citation de la documentation officielle

Lorsque le composant monte, l'opacité est définie sur 0. Ensuite, une animation d'accélération est lancée sur la valeur animée fadeAnim, qui mettra à jour tous ses mappages dépendants (dans ce cas, juste l'opacité) sur chaque image lorsque la valeur s'anime sur la valeur finale de 1.

Cela se fait de manière optimisée, plus rapide que d'appeler setState et de restituer.

3
Roman Osypov

En général, avec React il y a une grande différence entre stocker quelque chose en tant que propriété d'instance/classe (par exemple this.myVar = 'foo';) ou dans l'état. La différence est que React utilise l'objet state pour déterminer quand re-restituer le composant (c'est-à-dire appeler à nouveau render ()).

Si vous stockez une variable en tant que propriété de classe/instance et que vous la modifiez, React la logique de rendu ne sait rien de ce changement et, par conséquent, vous ne verrez aucun changement dans le interface utilisateur rendue.

Vous devez donc stocker dans l'état les éléments qui modifient la sortie rendue d'un composant. Si une variable n'affecte pas du tout la sortie rendue (et vous ne vous souciez pas d'être averti lorsqu'elle change fondamentalement), vous pouvez la stocker en tant que propriété d'instance/classe. Parfois, cela peut avoir de meilleures implications en termes de performances, car un appel setState pour mettre à jour cette variable déclencherait un rendu inutile.

Dans votre exemple de cas, vous avez omis la méthode de rendu, mais il est très probable que vous ayez besoin d'accéder à la variable fadeAnim dans l'état pour effectuer réellement l'animation. Fondamentalement, Animated.spring interpole simplement certaines valeurs au fil du temps, mais vous devez ensuite utiliser ces valeurs interpolées pour réellement animer quelque chose. Dans l'exemple de documentation ( https://facebook.github.io/react-native/docs/animated.html ), vous pouvez voir this.state.fadeAnim est utilisé dans render pour contrôler (animer) le style d'opacité.

Pour récapituler, vous devez stocker fadeAnim dans l'état spécifiquement parce qu'une modification de la valeur devrait déclencher un nouveau rendu.

2
fabio.sussetto