状態、REF＆簡単に説明するDOM：エントリ（C）を反応させ

まず、状態

内部コンポーネントの独自の定義で

効果：内部コンポーネントの再更新状態、内部コンポーネントが再レンダリング制御することができる（再検索アセンブリなしで再レンダリングすることができます）

'REACT'インポートからの反応; 
クラス時計{React.Componentが延びる
　　コンストラクタ（）{ 
　　スーパー（）; 
　　この .STATE = { 
　　　　時間：新しい新規。日付（）のtoLocaleString（）、
　　　　NUM： 0 
　　} 
} 
componentDidMount（）{ 
/ * * 
* 2つの方法で変更された状態
のステータスを変更する* 1 this.setState属性
*強制的this.forceUpdateによってレンダリング2. 
* / 
のsetInterval（（） => {
　　// このように、修正された状態だけでなく、再のみならずコンポーネント。レンダリングthis.setState（{ 
　　 　　（）時間:.新しい新A日（）のtoLocaleStringを
　　 }）// ）。この実施形態は状態を変更することができるが、再レンダリングすることができない、コンポーネントがレンダリングされる場合、それは（必要this.forceUpdateある必須レンダリング。
　　

　　
　　日=新しい新しいthis.state.time（）のtoLocaleString（）;. 
　　this.forceUpdate（）; 
　} 1000 ）
} 
レンダリング（）{ 


　　リターン（
　　　　 <DIV> 
　　　　　　<H2> { この .state.time} </ H2> 
　　　　　　< onClick = {イベント=ボタン> {
　　　　　　　　// ときにメインの背面、SETSTATEを実行した後、及びEventQueueの（待機イベントキュー）に状態通知コンポーネントのレンダリング・オペレーションを変更します。ここでは、SETSTATE非同期プログラミング状態である成分を改変しました。スタックタスクは、この操作が完了し実行する
　　　　　　　　// 全てSETSTATE非同期動作ではなく、。
　　　　　　　　この.setState（{ 
　　　　　　　　NUM：本。.state.num + 1 
　　　　　　}）; 
　　　　　はconsole.log（この .state.num）; // 最初のプリント時間は0です 
　　　　　I </ボタン>}}>ポイント
　　　　</ DIV>
　　）
　}
} 
輸出デフォルトの時計。

二、REF＆DOM

延びReact.Componentクロック{クラス
　　コンストラクタ（）{ 
　　　　スーパー（）; 
　　　　この .STATE = { 
　　　　　　時間：新しい新規A日（）のtoLocaleString（）,. 
　　　　NUM： 0 
　　} 
　　この .time React.createRef =（）; // 第関数作成によって
} 
componentDidMount（）{ 
　　たsetIntervalを（（） => {
　　/ * * 
　　我々はREF属性（属性値が一意である）に要素を設定した場合* 
　　* REF = "XXX"、意志をJSX解析時間を反応させますオブジェクトREFの現在のインスタンス増加させるように、この要素の属性セットオブジェクトキー：{XXX素子} 
　　レンダリング後* JSXが完了し、所望の動作要素は、直接ベースthis.refs.xxxを得ることができます。この操作は、DOMに反応していること
　　* / 
　　this.refs.time.innerHTML新しい新しい=日付（）のtoLocaleString（）;.　　 //console.log（this.refs）{時間：H2} 

　　この .time.innerHTML = 新しい新A日（）のtoLocaleString（）;.　　// はconsole.log（this.time）{時間：H2}
 
　　}、1000 ）
} 

レンダリング（ ）{ 
　　// 最初の（直接属性が定義された）
　　戻り <REF = {H2 '時間'}> { この .state.time} </ H2> // 矢印によって規定される第2の（関数）
　　// 値refであります文字列のほかにも関数であってもよいです。それは、パラメータxの関数である場合、現在の要素自体によって表されているが、我々は、一般的に、現在の要素インスタンスに直接マウントされ、
　　// ：this.xxxは（xはH2である場合など）の要素を操作することができる直後リターン（
　　　　 <DIV> 
　　　　　　<H2 = {X REF => { この .time X}} => { この .state.time} </ H2> 
　　　　</ div>

　　
　　


　　（React.createRefによって（）メソッドが定義されている）第三の 
　　<REF = {H2 この .time}> { この .state.time} </ H2>
　} 
}

ここでレフリーのためのいくつかの重要なユースケースは、次のとおりです。

-治療フォーカス、テキスト選択、またはメディアコントロール。
-義務的なアニメーションをトリガーします。
-サードパーティ製のライブラリDOMを統合

たとえば、次のようにフォーカス処理

CustomTextInput React.Component {クラス延び
  コンストラクタ（小道具）{ 
    スーパー（小道具）; 
    // REFストレージにtextInput DOM要素を作成し
    、この .textInput = React.createRef（）;
     この .focusTextInputは= この .focusTextInput.bind（この）; 
  } 

  focusTextInput （）{ 
    // 直接焦点得られるテキスト入力ボックスを作るためにネイティブAPIを使用して
    // 注：「現在の」DOMノードを取得し
    、この.textInput.current.focus（）; 
  } 

  （レンダリング）{ 
    // 我々が反応したい教えを<入力> `textInput`がで作成し、コンストラクタにリンクrefを
    リターン（
      の<div> 
        < 種類のINPUT =「テキスト」REF = { この .textInput} /> 
          
        < 入力タイプ = "ボタン" 値 = "フォーカステキスト入力" のonClick = { この.focusTextInput} /> 
      </ div>     ）。
  } 
}

状態、REF＆簡単に説明するDOM：エントリ（C）を反応させ

まず、状態

二、REF＆DOM

おすすめ