React.jsフォームコンポーネントで状態または参照を使用しますか？

私はReact.jsから始めて、簡単なフォームを作成したいのですが、ドキュメントでそれを行う2つの方法を見つけました。

最初のものは使用している参考文献を：

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }
    // TODO: send request to the server
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).value = '';
    return;
  },
  render: function() {
    return (
      <form className="commentForm" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Your name" ref="author" />
        <input type="text" placeholder="Say something..." ref="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});

そして2番目はReactコンポーネント内のstateを使用しています：

var TodoTextInput = React.createClass({
  getInitialState: function() {
    return {
      value: this.props.value || ''
    };
  },

  render: function() /*object*/ {
    return (
      <input className={this.props.className}
      id={this.props.id}
      placeholder={this.props.placeholder}
      onBlur={this._save}
      value={this.state.value}
      />
    );
  },

  _save: function() {
    this.props.onSave(this.state.value);
    this.setState({value: ''
  });
});

2つの代替案が存在する場合、その長所と短所はわかりません。ありがとう。

短いバージョン：参照を避けます。

これらは保守性が悪く、レンダリングが提供するWYSIWYGモデルのシンプルさの多くを失っています。

フォームがあります。フォームをリセットするボタンを追加する必要があります。

• refs：
  • DOMを操作する
  • renderは、3分前のフォームの外観を表します
• 状態
  • setState
  • renderはフォームがどのように見えるかを説明します

入力にCCV番号フィールドがあり、アプリケーション内に数値である他のいくつかのフィールドがあります。ここで、ユーザーに数字のみを入力させる必要があります。

• refs：
  • onChangeハンドラーを追加します（これを回避するために参照を使用していませんか？）
  • 数値でない場合、onChangeでdomを操作します
• 状態
  • あなたはすでにonChangeハンドラを持っています
  • ifステートメントを追加し、無効な場合は何もしない
  • renderは、異なる結果を生成する場合にのみ呼び出されます

ええ、気にしないでください。首相は、それが無効な場合は、赤いボックスシャドウを実行するように要求します。

• refs：
  • onChangeハンドラーがforceUpdateなどを呼び出すだけですか？
  • レンダー出力をベースにして...ハァッ？
  • レンダリングで検証する値はどこにありますか？
  • 要素のclassName domプロパティを手動で操作しますか？
  • 道に迷いました
  • 参照なしで書き換えますか？
  • マウントされている場合はレンダーでdomから読み取り、そうでない場合は有効と見なしますか？
• 状態：
  • ifステートメントを削除する
  • this.stateに基づいてレンダーを検証する

親に制御を戻す必要があります。データは小道具になり、変更に対応する必要があります。

• refs：
  • componentDidMount、componentWillUpdate、およびcomponentDidUpdateを実装します
  • 以前の小道具を手動で比較する
  • 最小限の変更セットでdomを操作する
  • ねえ！反応で反応を実装しています...
  • もっとありますが、私の指は痛いです
• 状態：
  • sed -e 's/this.state/this.props/' 's/handleChange/onChange/' -i form.js

人々は、リファレンスを状態に保つよりも「簡単」であると考えています。これは最初の20分間は当てはまるかもしれませんが、その後の私の経験では当てはまりません。「確かに、いくつかのコンポーネントを書き換えるだけ」ではなく、「ええ、5分で完了します」と言う立場に自分を置きます。

「refを使用しない」理由として上記の回答を引用する人が何人かいるのを見たことがありますが、私（および私が話を聞いた他の数人のReact開発者）に意見を述べたいと思います。

「参照を使用しない」という感情は、コンポーネントインスタンスでの参照の使用に関しては正しいです。つまり、コンポーネントインスタンスを取得してそれらのメソッドを呼び出す方法としてrefを使用しないでください。これは参照を使用する誤った方法であり、参照がすぐに南下する場合です。

refを使用する正しい（そして非常に便利な）方法は、それらを使用してDOMから値を取得する場合です。たとえば、その入力に参照をアタッチする入力フィールドがある場合、後で参照を介して値を取得するだけで問題ありません。この方法がない場合、ローカル状態またはフラックスストアのいずれかで入力フィールドを最新の状態に保つために、かなり調整されたプロセスを実行する必要がありますが、これは不要のようです。

2019編集：こんにちは、未来の友達。数年前に述べたものに加えて^、React Hooksを使用すると、refはレンダリング間でデータを追跡するための優れた方法でもあり、DOMノードの取得だけに限定されません。

TL; DR一般的に言えば、refsReactの宣言的な哲学に反するため、最後の手段として使用する必要があります。state / props可能な限り使用してください。

refsvsを使用する場所を理解するためにstate / props、Reactが従う設計原則のいくつかを見てみましょう。

あたりが反応ドキュメントをについてrefs

宣言的に行うことができるものには、参照を使用しないでください。

脱出ハッチに関するReactの設計原則

アプリの構築に役立つパターンが宣言的に表現するのが難しい場合は、命令型のAPIを提供します。（そして、彼らはここで参照にリンクしています）

つまり、Reactのチームは、反応的/宣言的な方法で実行できるあらゆるものを回避refsして使用することを提案していstate / propsます。

@タイラーマクギニスは非常に良い答えを提供し、それも述べています

refを使用する正しい（そして非常に便利な）方法は、それらを使用してDOMから値を取得する場合です...

それは可能ですが、Reactの哲学に反することになります。入力に値がある場合、それは間違いなくからのものstate / propsです。コードの一貫性と予測可能性を維持するには、state / propsそこにも固執する必要があります。私はrefs時々あなたにもっと速い解決策を与えるという事実を認めます、それであなたが概念の証明をするならば、速くて汚いことは許容できます。

これにより、いくつかの具体的な使用例が残りますrefs

フォーカス、テキスト選択、またはメディア再生の管理。命令型アニメーションのトリガー。サードパーティのDOMライブラリとの統合。

この投稿は古いです。

その件について、私の小さな経験を共有します。

私は、多くの「動的」入力と多くのキャッシュされたデータが含まれる大きなコンポーネント（414行）で作業していました。（私はページで一人で作業しているのではなく、コードの構造がおそらくより良く分割される可能性があると私の感覚は教えてくれますが、それはポイントではありません（まあ、それは可能ですが、私はそれを扱っています）

最初に状態を操作して、入力の値を処理しました。

  const [inputsValues, setInputsValues] = useState([])
  const setInputValue = (id, value) => {
    const arr = [...inputsValues]
    arr[id] = value
    setInputsValues(arr)
  }

そしてもちろん入力では：

value={inputsValues[id] || ''}
onChange={event => setInputValue(id, event.target.value)}

レンダリングが非常に重く、入力の変更が****と途切れがちでした（キーを押したままにしないでください。テキストは一時停止後にのみ表示されます）

refsを使用してこれを回避できると確信していました。

このようになった：

  const inputsRef = useRef([])

そして入力で：

ref={input => (inputsRef.current[id] = input)}

[私の場合、入力はMaterial-UI TextFieldだったので、

inputRef={input => (inputsRef.current[id] = input)}

]

これのおかげで、再レンダリングは行われず、入力はスムーズで、機能は同じように機能します。サイクルと計算を節約するので、エネルギーも節約できます。地球のためにそれを行うx）

私の結論：入力値のuseRefも必要になる可能性があります。