Reactにおける制御されたコンポーネントと制御されていないコンポーネントの簡単な分析

制御されていないコンポーネント

フォームデータは DOM 自体によって処理されます。つまり、setState() によって制御されず、従来の HTML フォーム入力に似ています。入力値は最新の値を示します (ref を使用して DOM からフォーム値を取得します)

1. 制御されていないコンポーネント

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<本文>
<!--コンテナを準備する-->
<div id="test"></div>

<!--React Core ライブラリの紹介-->
<script src="../js/react.development.js"></script>
<!-- react 操作 dom をサポートするために react-dom を導入します -->
<script src="../js/react-dom.development.js"></script>
<!--jsx を js に変換するには babel を導入します-->
<script src="../js/babel.min.js"></script>
<!--コンポーネント タグのプロパティを制限するために prop-types を導入します-->
<script src="../js/prop-types.js"></script>

<script type="text/babel">
    クラスLoginはReact.Componentを拡張します。
        React のインスタンスを作成します。
        React のインスタンスを作成します。
        handleSubmit = (イベント) => {
            event.preventDefault() // フォームの送信を禁止する const username = this.myRef1.current
            const パスワード = this.myRef2.current
            alert(`入力したユーザー名は: ${username.value}、入力したパスワードは: ${password.value}`)
        }
        与える（） {
            戻る （
                <フォームonSubmit={this.handleSubmit}>
                    ユーザー名: <input ref={this.myRef1} type="text"/> &nbsp;
                    パスワード: <input ref={this.myRef2} type="text"/> &nbsp;
                    <button>ログイン</button>
                </フォーム>
            ）
        }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))
</スクリプト>
</本文>
</html>

制御コンポーネント

HTML では、通常、<input>、<textarea>、<select> タグの値はユーザー入力に基づいて更新されます。 React では、変更可能な状態は通常、コンポーネントの状態プロパティに保存され、 setState() を使用してのみ更新できます。フォームをレンダリングする React コンポーネントは、その後のユーザー入力時にそのフォームに何が起こるかを制御します。このように、React によって制御される入力フォーム要素は値を変更します。これは「制御されたコンポーネント」と呼ばれます。

2. 制御対象コンポーネント（制御対象）

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
</head>
<本文>
<!--コンテナを準備する-->
<div id="test"></div>

<!--React Core ライブラリの紹介-->
<script src="../js/react.development.js"></script>
<!-- react 操作 dom をサポートするために react-dom を導入します -->
<script src="../js/react-dom.development.js"></script>
<!--jsx を js に変換するには babel を導入します-->
<script src="../js/babel.min.js"></script>
<!--コンポーネント タグのプロパティを制限するために prop-types を導入します-->
<script src="../js/prop-types.js"></script>

<script type="text/babel">
    クラスLoginはReact.Componentを拡張します。
        // 状態を初期化する state = {
            ユーザー名: ''、
            パスワード: ''
        }

        // ユーザー名を状態に保存する saveUsername = (e) => {
            this.setState({ユーザー名: e.target.value})
        }

        // パスワードを状態に保存する savePassword = (e) => {
            this.setState({パスワード: e.target.value})
        }

        ハンドル送信 = (e) => {
            e.preventDefault() // フォームの送信を禁止する const {username,password} = this.state
            alert(`入力したユーザー名は: ${username}、入力したパスワードは: ${password}`)
        }
        与える（） {
            // onChange の変更 return (
                <フォームonSubmit={this.handleSubmit}>
                    ユーザー名: <input onChange={this.saveUsername} type="text"/> &nbsp;
                    パスワード: <input onChange={this.savePassword} type="text"/> &nbsp;
                    <button>ログイン</button>
                </フォーム>
            ）
        }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))
</スクリプト>
</本文>
</html>

ここに画像の説明を挿入

知らせ

一般的に、ref は非制御コンポーネントで複数回使用されるため、制御コンポーネントの方が頻繁に使用されます。公式ドキュメントには「ref を過度に使用しないでください」と記載されています。ref を過度に使用すると、効率の問題が発生します。

結論は

制御される要素と制御されない要素にはそれぞれ利点があり、選択は具体的な状況によって異なります。フォームが UI フィードバックの点で非常に単純な場合は、ref を制御する、つまり制御されていないコンポーネントを使用することはまったく問題ありません。

特徴	制御不能	制御された
1回限りの取得（フォームの送信など）	はい	はい
タイムリーな検証	いいえ	はい
送信ボタンを条件付きで無効にする	いいえ	はい
入力フォーマットを実行する	いいえ	はい
1つのデータに複数の入力	いいえ	はい
ダイナミック入力	いいえ	はい