react-native
レンダリングのベストプラクティス

前書き

JSXの関数

パフォーマンスを向上させるには、JSXで配列（ラムダ）関数を使用しないようにすることが重要です。

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.mdで説明されているように：

JSXの小道具でバインドコールや矢印機能を使用すると、すべての単一のレンダーで新しい機能が作成されます。ガベージコレクタが必要以上に呼び出されるため、パフォーマンスが悪いです。また、新しい関数が、プロペラの参照平等チェックを使用して更新する必要があるかどうかを判断するコンポーネントに渡す場合、不要な再レンダリングが発生することがあります。

したがって、jsxコードブロックがこのようにある場合：

                    <TextInput
                      onChangeValue={  value => this.handleValueChanging(value) }
                    />

または

                    <button onClick={ this.handleClick.bind(this) }></button>

あなたはそれをより良くすることができます：

                    <TextInput
                      onChangeValue={  this.handleValueChanging }
                    />

そして

                    <button onClick={ this.handleClick }></button>

handleValueChanging関数内の正しいコンテキストについては、コンポーネントのコンストラクタでそれを適用できます。

          constructor(){
            this.handleValueChanging = this.handleValueChanging.bind(this)
          }

コンポーネントに渡された関数のバインディングの詳細

または、次のようなソリューション、 https : //github.com/andreypopp/autobind-decoratorを使用して、バインドするメソッドに@autobindデコレータを追加するだけです。

        @autobind
        handleValueChanging(newValue)
        {
            //processing event
        }