React 初心者がよく尋ねる質問は、なぜ双方向データ バインディングが組み込み機能ではないのか、というものです。通常の回答では、双方向データ バインディングはパフォーマンス上の理由から必ずしも望ましいわけではないという考えとともに、一方向データ フローの説明が含まれています。これは、私がより詳しく理解したい 2 番目のポイントです。

私は現在、フォームライブラリに取り組んでいます。アポロリンクステート(Apollo の新しいクライアント側状態管理ツール)。概念は redux-form と非常に似ていますが、状態マネージャーとして redux ではなく apollo-link-state を使用する点が異なります。(フォームの状態はドメイン エンティティの状態とは別に保存されますが、オプションでエンティティを使用してフォームの初期状態を設定することもできます。)

ユーザーがフォームに変更を加えると、ライブラリはonChangeハンドラーを介してストアを即座に更新します。プログラマーがパフォーマンスを懸念している場合に備えて、個々のフィールドでその動作をオプトアウトできるようにすることを考えていましたが、これが実際にパフォーマンスの問題になるのはいつなのか疑問に思い始めました。ブラウザはoninputどのような場合でもイベントを発生させるので、私が考えられる唯一のパフォーマンス上の考慮事項は、ユーザーが入力したときにストアが更新されるかどうかです。確かに、 を呼び出すのではなく、ミューテーションを実行するという追加のオーバーヘッドがありますが、それはsetState()基本的にいくつかの追加関数呼び出しに相当します。また、apollo を使用せず、グローバルストアを直接更新する関数を呼び出すだけだと仮定しましょう。その場合、パフォーマンス上の考慮事項は何でしょうか?

私の考えでは、フォームが、ユーザーが 1 つのフィールドに入力するとすぐにフォームの状態を更新することをサポートするのであれば、すべてのフィールドでそのようにするほうがよいと思います。ユーザーは一度に 1 つのフィールドにしか入力できません。また、一部のフィールドではページが速くなる (おそらく無視できる程度) 一方で、他のフィールドでは遅くなるというメリットは見当たりません。さらに、私のライブラリでは、コンシューマーが任意の入力コンポーネントを使用できるため、プログラマーが状態の更新を減らしたいだけであれば、React のonChangeイベントをデバウンスするコンポーネントを作成するか、代わりにブラウザー独自のイベントchangeまたはblurイベントを使用するだけで済みます。

何か見落としているのでしょうか? ライブラリのユーザーがフォームを送信するまで特定のフィールドの変更を無視したい理由は他にもあるのでしょうか? あるいは、フォーム全体の変更を (送信するまで) 無視する方が便利なオプションでしょうか?

以下は、私の現在のアプローチの背後にある基本概念の基本的な（大幅に簡略化された）図です。

// defined in a globally-accessible module
const formState = {
    // This somehow causes any dependent form components to re-render
    // when state changes
    update(formName, updatedState) {
        ...
    }
}
export default formState

...
// UserForm.js:

export default class UserForm extends PureComponent {
    componentDidMount() {
        formState.userForm = {
            firstName: '',
            lastName: '',
        }
    }

    handleChange(e) {
        const { target } = e
        formState.update('userForm', { [target.name]: target.value })
    }

    //...

    render() {
        const { userForm } = formState
        return (
            <form onSubmit={this.handleSubmit}>
                <label for="name">Name</label>
                <input id="name" type="text" onChange={this.handleChange} value={userForm.name} />

                <label for="email">Email</label>
                <input id="email" type="email" onChange={this.handleChange} value={userForm.email} />
            </form>
        )
    }
}