React fragments, portals, refs

JSX LimitationJSXのうちLimitation (제한요소)があります.
特に一般的な制限要因です.
すなわち、すべての要素は、1つの最上位レイヤに囲まれなければならない.
Fragments
制限要因を回避するために、<div>に複数の構成部品を包むと、問題が発生する可能性がある.<div> soupは不要な<div>層を積み重ねている.
もちろん、それでもアプリケーションは実行時に問題が発生しない可能性がありますが、これは良いコードではありません.
最終的に<div> soupのオーバーラップが激しくなると、アプリケーションは遅くなるしかありません.
ここにはいい解決策がある.ELINMENTの代わりに<div>でProps.childrenに返信すればいいですしたがって、そのコードを使用することはますます多くなり、Reactエンドは、props.childrenを返す内蔵関数、すなわちFragmentsを簡単に作成します.

return (
<React.Fragment>
…
</React.Fragment>
)

// short_cut
return (
<>
…
</>
)

PortalsPortalsはよりクリーンなコードを提供し、Fragmentsと同様の特徴を有する.
すべてのReactコードは、通常、1つのrootユニットに重畳される.
たとえば、error-handlingのmodalテンプレートを作成します.
一般に、modalウィンドウはoverlayと組み合わせて使用され、多くの場合、overlayはhtmlグローバルを充填する.
ここでは悪い習慣が現れます.
戦区を埋め尽くしたmodal窓口はrootユニット内部に属する.

bad_practice // (for html)
<div id=‘root’>
  <div>
    <div class=‘modal’>
      ...
    </div>
  </div>
</div>

もしそうなら、私たちはこれらの部分を変えることができますか?

Good_practice // (for html)
<div class=‘modal’>
  ...
</div>
<div id=’root’>
…
</div>

これならもっと読みやすいですよね?
そのため、portalsを使用します.portalsを使用するには、react-domを使用します.
要素は、reactDOM.createPortal()によって所望の位置に移動することができる.

import ReactDOM from ‘react-dom’;

return (
…
{ReactDOM.createPortal
	(
	component, //<BackDrop />
	position where do you want to move, // document.getElementById()
	)
}

Refs (References)Refsはreactで非常に強力な機能を持っています.Refsは、DOM APIへの直接アクセスを可能にする.useRef()を使用すると、対応する値にネイティブDOM dataを格納できます.

import React, {useRef} from ‘react’
const nameRef= useRef();

…
console.log(nameRef)
// => {current : div#…}

Return (
<div ref={nameRef}>
</div>
)

State vs Refs
値を1つだけ読み込む場合は、Refsが有効です.Statesを使用する場合、必要でない場合や、重複するコードを記述する必要がある場合が多い.
しかしながら、極端なDOMの動作は、コードを乱し、Reactが重視するデータの不変性を破壊する可能性があるため、このような状況を考慮すると、Stateがより良好になる可能性がある.Stateのみ、またはRefsのみを使用します.
あるいは両方使っても大丈夫です
どちらが良いかではなく、開発者本人の意志次第です.
最良の方法は、コードの状況に応じて柔軟に判断し、使用することである.
Uncontrolled Componentrefsを使用する要素はUncontrolled Component (통제 불가능한 컴포넌트)である.refsを使用してDOM APIに直接アクセスし、データを変更します.
これらの構成部品は、React(state)に変更できません.
これを内部状態(内部状態処理)と呼ぶ.
逆に、Reactによって修正可能な要素をControlled Componentと呼ぶ.
これは、業界やコミュニティでコードを書くのに役立つものではありません.これは良いセグメントです.