　　要素のレンダリング、ノードクエリ、イベント処理メカニズムを含め、DOMブラウザに依存しないシステムのセットを達成するために反応します。

、ReactDOM

　　互換性のより多くの端末が反応するように、最初からv0.14に反応し、DOMからの公式リリースに関連付けされ、個々の反応-DOMライブラリーの構成を操作し反応します。オブジェクトは、前の章で、数回使用されていますが、あまりにも多くの説明を与えていないものの、このセクションでは、その完了に焦点を当て、ReactDOM：導入反応-DOMライブラリーの後、あなたはグローバルオブジェクトを呼び出すことができます。

　　ReactDOMのみunmountComponentAtNode（）、findDOMNode（）が含ま createPortal（）及びレンダリング（）項、数、およびいくつかの他の方法は最初の二つのレンダリング（）関数に記載され、そして最初の4つの言及をDOM unmountComponentAtNode（）メソッドを搭載したアセンブリを取り外します。次は、残りの2つのメソッドを説明します。

1）findDOMNode（）

　　アセンブリが実際のDOM内のページにレンダリングされたときにDOM要素findDOMNode（）メソッドを生成することによって得られ、その後、読み出しなど完了サイズおよび他の動作を計算することができることができます。

　　、findDOMNode（）は組み立てだけではなく、アセンブリの機能のために搭載されることを注意してください。のみcomponentDidMount（）とcomponentDidUpdate（）は、2つのコールバックで存在することができるコンポーネントのライフサイクルにおいて、以下に示すように、エラーをスローします他の場所で呼び出します。

クラスBTNはReact.Component {延び
  レンダリング（）{ 
    ReactDOM.findDOMNode（この）。        // 抛出错误   
    リターン <ボタン>提交</ button>の。
  } 
  componentDidMount（）{ 
    ReactDOM.findDOMNode（本）        // <ボタン>提交</ボタン> 
  } 
}

　　これは、<ボタン>要素を取得するfindDOMNode（）メソッドを通過した後、上記の例では、この点は、BTNコンポーネントインスタンスです。レンダリングコンポーネントは、（）（findDOMNode、その後、nullまたはfalseを返す）nullを返しますならば、もう一つ注意すべき。

2）createPortal（）

　　V16を反応させるには、DOMをレンダリングコンポーネントは、親コンポーネント以外のノード可能にするために、ポータルの特性を追加します。この機能は、シナリオに適用され、このようなボックス内のカスタムページ爆弾の作成など、容器の外にジャンプする必要があります。

　　createPortal（）：ReactDOMに新しいメソッドを呼び出す必要があり、ポータルの特性を使用して反応させます。容器に装着された第二DOM要素、;このメソッドは、文字列などの要素を、反応させ、アレイの他の要素に反応、最初の子がレンダリングされる2つのパラメータを受信することができます。この方法のための特定の使用は、以下の実施例を参照することができます。

クラスBTNはReact.Component {延び
  （レンダリング）{ 
    戻り ReactDOM.createPortal（この.props.children、document.body）を、
  } 
} 
ReactDOM.render（ <BTN> <P>按钮</ P> </ BTN>、のdocument.getElementById（ "コンテナ"））;

　　上記（）メソッドの呼び出しを（）レンダリングReactDOM.createPortalでは、<p>要素は、最終的に、<body>要素に装着されるように、id属性は、「コンテナ」要素ではありません。

二、参考文献

　　参考文献生成DOMコンポーネントインスタンスと処理要素の焦点を合わせるために使用される要素のレンダリング（）メソッドで読み取り可能なアクセス方法は、アニメーションをトリガーする、DOMは、サードパーティのライブラリを統合します。アセンブリのライフサイクルでは、効果的な参考文献を聞かせて仕事2でそれcomponentDidMount（）とcomponentDidUpdate（）コールバック関数を配置する必要があることに注意してください。参考文献は、利便性をもたらすために、特定のシーンを与えるが、それは典型的なデータ・ストリームを破壊しながら、小道具を介してデータを渡すように反応するので、参考文献の使用を避けるようにしてください。

　　あなたは参考文献の機能を使用している場合は、参照を設定する必要が要素を反応させるの属性、その値は、オブジェクト、コールバック関数とこれら3つの文字列の値にすることができ、以下はそれぞれ、ref属性を説明します。

1）オブジェクト

　　ここでの目的は、現在の属性を含む、値React.createRef（）メソッドを返すことで、DOM要素またはコンポーネントのインスタンスに属性ポイントが読み取られます。次の例では、プロパティおよびReact.createRef refの嵌合工程（）メソッドを示しています。

クラスBTNはReact.Component {延び
  コンストラクタ（小道具）{ 
    スーパー（小道具）。
    この .myBtn = React.createRef（）。
  } 
  レンダリング（）{ 
    戻り <ボタンREF = { この .myBtn}>提交</ボタン>。
  } 
  componentDidMount（）{ 
    BTNせ = この.myBtn.current。
    console.log（BTN）。         // <ボタン>提交</ボタン> 
  } 
}

　　最初React.createRef（）コンストラクタアセンブリを呼び出し、次にthis.myBtn割り当てられた戻り値を、我々はアセンブリ内の任意の位置にオブジェクトを使用できるように、次にせthis.myBtn <ボタン>要素REFでありますプロパティの値、および成功したアクセス参考文献の種類を完了するために、プロパティの現在の値にcomponentDidMountを（）読むことがようやくできます。

2）コールバック関数

　　アセンブリがアンロードされると、パラメータがnull、コールバック関数は、パラメータ（コード下記に示す）を受信するように、アセンブリが装着された場合、コンポーネントインスタンスまたはDOM要素パラメータです。

クラスBTNが延びるReact.Component { 
  レンダリング（）{ 
    リターン（
       <ボタンREF = {BTN => { この .myBtn = BTN}}>提交</ボタン>
     ）。
  } 
  componentDidMount（）{ 
    BTNを聞かせ = この.myBtn。
    console.log（BTN）。           // <ボタン>提交</ボタン> 
  } 
}

　　かつて使用して最大の違いは、あなたが期待する結果を得ることができ、あなたは現在のプロパティを呼び出す必要はありません、直接コールバック関数でthis.myBtnパラメータに割り当てられているReact.createRef（）メソッド、依存を削除することです。

3）文字列

　　REF属性値はまた、例えば、文字列、次のコード「myBtnです」、this.refs.myBtnにより所望の成分のインスタンスまたはDOM要素にアクセスすることができるかもしれません。

クラスBTNはReact.Component {延び
  レンダリング（）{ 
    リターン <ボタンREF = "myBtnです">提交</ボタンを>。
  } 
  componentDidMount（）{ 
    BTNを聞かせ = この.refs.myBtn。
    console.log（BTN）。           // <ボタン>提交</ボタン> 
  } 
}

　　しかし、当局は、このようなアプローチを推奨していない、削除されます将来のバージョンでは可能であるが、モードコールバック関数を切り替えることをお勧めします。

4）利用シーン

　　次のコードに示すようにのみさらにREFを使用して、前の例のようにDOM要素として適用することができるREF属性は、アセンブリ内のクラス属性。

クラスBTNはReact.Componentが{延び
  レンダリング（）{ 
    リターン <ボタン>提交</ボタン>。
  } 
} 
クラスコンテナReact.Componentが{延び
  レンダリング（）{ 
    リターン <BTN REF = {BTN => { この .myBtn = BTN}}>提交</ BTN>。
  } 
  componentDidMount（）{ 
    BTNを聞かせ = この.myBtn。
    console.log（BTN）。           // BTN组件的实例
  } 
}

　　容器BTNは、（）メソッドは、コンポーネントインスタンスBTN this.myBtnに割り当てられたコールバック関数をレンダリングする親コンポーネントです。

　　そこ成分関数のインスタンスがなく、したがってREF属性を添加することができないからです。

DOM要素5）サブアセンブリ

　　あなたはDOM要素のサブコンポーネントにアクセスしたい場合は親コンポーネントでは、その後、参照がref属性は、サブアセンブリの唯一のインスタンスを結果としてので、達成することができないだけでは属性。しかし、そこにこの要求を達成するための間接的な方法であってもよく、使用にREF属性ReactDOM.findDOMNode（）という。唯一のコードの修正された部分が表示されている、容器とBTN二つの成分に以下の利用シーンを適用し、残りの部分は省略されています。

クラスコンテナReact.Component {延び
  componentDidMountは（）{ 
    BTNせ = この.myBtn。
    聞かせてDOM = ReactDOM.findDOMNode（BTN）。
    console.log（DOM）。         // <ボタン>提交</ボタン> 
  } 
}

　　componentDidMountに（）メソッドは、それによって、サブアセンブリが持つDOM要素を得る）（ReactDOM.findDOMNode一度呼び出されます。

三、フラグメント

　　JSX構造は限界があり、それはそれが冗長要素であっても、それらは追加する必要があり、最外層の要素でラップされるべきです。以下に示すように、例えば、<UL>要素は、集合の要素のセットをマウントします。

クラスBtnsはReact.Component {延び
  レンダリング（）{ 
    リターン（
       <DIV> 
        <LI> 1 </ LI> 
        <LI> 2 </ LI> 
        <LI> 3 </ LI> 
      </ div>     ）。
  } 
}

　　DOMは、ここでの<div>要素は有用ではありません、以下のように見えるページにレンダリングします。

< UL ID = "コンテナ" > 
  < DIV > 
    < 李> 1 </ 李> 
    < 李> 2 </ 李> 
    < リチウム> 3 </ 李> 
  </ DIV > 
</ UL >

　　そのような無意味な出力を回避するために、その構造はコードの下に示され、断片を導入し反応します。単純に開始タグと終了タグは、最も外側の<div>要素は、<>と</>、DOM内の余分な要素を追加しないように変更されました。

クラスBtnsはReact.Component {延び
  レンダリング（）{ 
    リターン（
       <> 
        <LI> 1 </ LI> 
        <LI> 2 </ LI> 
        <LI> 3 </ LI> 
      </>     ）。
  } 
}

1）React.Fragment

　　<>と</>は、最終的には、前者は構文糖である、つまり、開始タグと終了タグの中にReact.Fragmentコンポーネントをコンパイルされます。次のコード例およびフラグメントに同等です。

クラスBtnsはReact.Componentが{延び
  レンダリング（）{ 
    リターン（
       <React.Fragment> 
        <LI> 1 </ LI> 
        <LI> 2 </ LI> 
        <LI> 3 </ LI> 
      </React.Fragment>     ）。
  } 
}

　　あなたは（それがキー属性のために定義される）の断片として特定のキーを追加したい場合は、あなただけのReact.Fragmentコンポーネントラップ子要素を使用することができます。キーのみが利用できるプロパティReact.Fragmentコンポーネントである、注意してください。

反応し、DOM - 反応の練習は（5）に注意することが不可欠です

、ReactDOM

二、参考文献

三、フラグメント

おすすめ