ダイレクト操作

state/props を使用してサブツリー全体を再レンダリングすることなく、コンポーネントを直接変更する必要がある場合があります。たとえば、ブラウザで React を使用する場合、DOM ノードを直接変更する必要がある場合があり、モバイルアプリのビューでも同じことが言えます。 setNativeProps は、DOM ノードに直接プロパティを設定することと等価な React Native の機能です。

注意

頻繁な再レンダリングがパフォーマンスのボトルネックになる場合は、setNativeProps を使用してください！

ダイレクト操作は、頻繁に使用するツールではありません。通常は、コンポーネント階層のレンダリングと多数のビューの調整のオーバーヘッドを回避するために、連続アニメーションを作成する場合にのみ使用します。 setNativeProps は命令型であり、状態を React コンポーネント内ではなくネイティブ層（DOM、UIView など）に格納するため、コードの理解が難しくなります。

使用する前に、setState と shouldComponentUpdate で問題を解決してみてください。

TextInput 値を編集するための setNativeProps

setNativeProps のもう1つの非常に一般的なユースケースは、TextInput の値を編集することです。 bufferDelay が小さく、ユーザーが非常に速く入力すると、TextInput の controlled プロパティが文字をドロップすることがあります。一部の開発者は、このプロパティを完全にスキップし、代わりに setNativeProps を使用して必要なときに TextInput 値を直接操作することを好みます。

たとえば、次のコードは、ボタンをタップしたときの入力の編集を示しています。

TypeScript

JavaScript

clear メソッドを使用して TextInput をクリアすることができます。これは、同じアプローチを使用して現在の入力テキストをクリアします。

レンダー関数との競合の回避

レンダー関数によっても管理されているプロパティを更新すると、コンポーネントが再レンダリングされ、そのプロパティが変更されるたびに、setNativeProps から以前に設定された値が完全に無視され、上書きされるため、予期しない混乱を招くバグが発生する可能性があります。