VueでもReactでも、要素のDOMを使いたい場合、JSでDOMを操作する必要はなく、refという専用のAPIが用意されています。
Vue の ref は比較的単純です (this.$refs.xxx だけ) この記事では主に React での ref の使用方法について説明します。
意味：
ref は Reference の略で、参照のことです。react では、DOM を操作するために ref を使用します。
使用：
[refs の文字列形式] は非推奨になりました
ただ理解してください。
ボタンをクリックすると input1 を出力できますが、コンソールはエラーを報告します。プロンプト エラー メッセージは次のように翻訳されます。
文字列参照「input1」が厳密モード ツリーで見つかりました。文字列の引用は潜在的なエラーの原因となるため、避ける必要があります。useRef() または createRef()の使用をお勧めします。
[コールバック参照]
ショートフォーム：
<input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据" />こうすればエラーは出なくなります
補足: コールバック ref のコールバック実行数の問題 --- 理解するだけで解決する必要はありません
[公式回答] ref コールバック関数がインライン関数として定義されている場合、更新プロセス中に 2 回実行されます。1回目はパラメーター null が渡され、2 回目はパラメーター DOM 要素が渡されます。これは、レンダリングごとに新しい関数インスタンスが作成されるため、React は古い ref をクリアして新しい ref を設定するためです。上記の問題は、ref のコールバック関数をクラスのバインディング関数として定義することで回避できますが、ほとんどの場合は関係ありません。
【createRefの使い方】
React.createRef は呼び出し後にコンテナを返すことができ、ref で識別されたノードを格納できます。
createRef は **React v16.3** の新しい API で、これを使用すると、render メソッドで作成された DOM ノードまたは React 要素にアクセスできるようになります。
Ref は React.createRef() を使用して作成され、ref 属性を介して React 要素にアタッチされます。
通常、Ref は React コンポーネントのコンストラクターで定義されるか、関数コンポーネントのトップレベルで変数定義として定義され、render() 関数の要素にアタッチされます。
