web-dev-qa-db-ja.com

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

アニメーション化された値（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（）をバイパスするため、状態が変化していなくてもコンポーネントは更新されます。

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

reactjsreact-nativeecmascript-6
29
Fabian Zeindl

公式ドキュメントに従い、状態プロパティを使用することをお勧めします。これには2つの理由があります。

  1. コンポーネントのレンダリング結果に影響を与えるすべてのものを状態/小道具/コンテキストに保持する必要があります。
  2. React-Native Animatedライブラリには、setState呼び出しを回避し、Animatedコンポーネントの変更時に再レンダリングすることを可能にする独自の最適化があります。これは公式ドキュメントからの引用です

コンポーネントがマウントされると、不透明度は0に設定されます。次に、fadeAnimアニメーション値でイージングアニメーションが開始され、値がアニメートするときに各フレームのすべての依存マッピング（この場合は、不透明度のみ）が更新されます最終値は1です。

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

3
Roman Osypov

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

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

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

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

要約すると、値を変更すると再レンダリングがトリガーされるため、fadeAnimを状態に保存する必要があります。

2
fabio.sussetto