React-native：アニメーション値を状態またはクラスプロパティとして保持しますか？

Question

アニメーション値（fadeAnim）を状態のプロパティとして保持する方が良いですか、それともクラスプロパティにするのはいいですか？

例：

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(); 
    } 
} 

明確化： 私は状態がの反応和解のために使用されていることを知っています。 React-native 'Animatedの値は通常のrender（）をバイパスするので、状態が変化していなくてもコンポーネントは更新されます。

Animated.Valueと私のshouldComponentUpdateを比較しても意味がありません。そのため、私はそれを状態から移動しました。

Answer 1

一般に、リアクションでは、何かをインスタンス/クラスのプロパティ（例：this.myVar = 'foo';）として保存するか、または状態に保存するかの大きな違いがあります。違いは、Reactが状態オブジェクトを使用してコンポーネントを再レンダリングする（つまり、render（）を再度呼び出す）ことを決定することです。

変数をクラス/インスタンスプロパティとして保存してから変更すると、リアクションレンダリングロジックはその変更について何も知らないため、レンダリングされたUIに変更が表示されません。

したがって、コンポーネントのレンダリングされた出力を変更する状態を保存する必要があります。変数がレンダリングされたすべての出力に影響を与えない場合（そして基本的に変更されたときに通知されることはありません）、インスタンス/クラスプロパティとして格納できます。その変数を更新するためにsetState呼び出しが不必要なレンダリングをトリガーするため、これはパフォーマンスの向上につながります。

あなたのケースでは、レンダリングメソッドを省略しましたが、アニメーションを実際に実行するには、状態変数fadeAnimにアクセスする必要があります。基本的に、Animated.springは時間の経過とともにいくつかの値を補間するだけですが、実際にアニメーション化するには、これらの補間値を使用する必要があります。 ドキュメントの例（https://facebook.github.io/react-native/docs/animated.html）では、this.state.fadeAnimがrenderの内部で使用され、不透明スタイルを制御（アニメーション化）することがわかります。

要約すると、fadeAnimを状態に格納する必要があります。これは、値の変更によって再レンダリングが発生するためです。

Answer 2

公式文書に従って、状態プロパティを使用する方が良いです。 そのための2つの理由があります。

1. あなたがコンポーネントに影響を与えるすべてのものを維持したいが、あなたの状態/小道具/コンテキストで結果をレンダリングします。
2. React-Native Animatedライブラリには、setState呼び出しを回避し、アニメーションコンポーネントの変更を再描画することを可能にする独自の最適化機能があります。これは、その依存すべてのマッピングを更新するコンポーネントマウントは、不透明度が緩和アニメーションがfadeAnimアニメーション値で開始され、その後、0に設定されている公式ドキュメント

、からの引用（ですこの場合、不透明度のみ）が値の最後の値1になります。

これは、setStateの呼び出しと再レンダリングよりも高速な最適化された方法で行われます。