私たちが普段欠けている反応に関する概念とMobexに関する概念をまとめてみましょう.(+ブラウザ関連コンテンツの追加)

React

Handle DOM in React (ref)

場合によってはDOMを直接制御する必要がある.

アニメーション制御が必要な場合

DOM APIを呼び出す必要がある場合(フォーカス、テキスト、メディア)

外部DOMライブラリを使用する場合は

である.
反応器では、素子制御は、実際の関数を呼び出すのではなく、値を使用して制御される.
refを使用する場合、userefというhook関数が使用されます.

forwardRef

を使用すると、コードが複雑になります.だからなるべく使わないでください.

Portal

react-dom提供.

ReactDOM.createPortal(child: React.ReactNode, container: HTMLElement)

勘定科目の勘定科目の最初のパラメータ(child)は、要素、文字列、またはクリップの任意のタイプをレンダリングできるReactサブアイテムです.
2番目のパラメータはDOM elimmentです.

react root DOM node外画react Element=>modal lで使用した方が良いです.

Portalコンポーネントで発生したイベントも親に伝えられます.

ex)

const MyPortal = ({ children }) => {
  const el = document.getElementById('my-portal');
  return ReactDOM.createPortal(children, el);
}

Custom Hook

\Custom Hookを作成すると、複合論理を再利用可能な関数として抽出できます.

const useInput = () => {
  const [value, setValue] = useState('')
  const Input = () => (
    <input
      type="text"
      value={value}
      onChange={e => setValue(e.target.value}
    />
  )

  return [value, Input]
}

const App = () => {
  const [title, TitleInput] = useInput()
  const [name, NameInput] = useInput()

  return (
    <div>
      <TitleInput />
      <NameInput />
      <button
        onClick={() => {
          console.log(title)
          console.log(name)
        }
      />
    </div>
  )
}

MobX

MobXの基本概念

1. Observable

勘定科目の勘定科目MobXでは、state(ステータス、値)をオブザーバ(オブザーバ可能な値)と呼びます.

このオブジェクトは変化すると検出できる.

2. Computed Value

計算済の値は、既存のステータス値と計算済の値に基づいて生成された値です.
新しい演算は、演算に基づく値が置き換えられた場合にのみ許可されます.

3. Reaction

АААААААААААААААА
[形式]

reaction(() => value, (value, previousValue, reaction) => { sideEffect }, options?)

[例]

4. Actions

ААААААААААА観測可能な状態に変化を引き起こすコードを呼び出すと,動作と呼ぶ.

💡useObserverを使用して返された値の更新を引き続き反映します.

ブラウザレンダーパス

HTML Parsing:HTMLドキュメントのParsingによるDOM Treeの作成プロセス

.
DOM : Document Object Model

Javaスクリプトエンジン:Javaスクリプトを処理して実行するエンジン.

再計算システム:フィルタされたcss結果(cssom)をプレゼンテーションツリーに適用するプロセス

CSSOM : CSS Object Model
=>ツリー構造は、継承概念を実装するために使用されます.

Render Tree:スタイル結果の再計算、DOM Tree+CSSOM Tree

画面上の要素を中心に構成します(表示されない場合は作成しません).
体は根です.

Layout:Render Treeノード座標の計算プロセス.

Paint:座標計算を完了し、実際のブラウザウィンドウで描画するプロセス

.
=>1ピクセルずつ描画します.△印刷物と同じですから、遅いです.

New version of browser`s main flow

Layer TreeとCompositeの更新が追加されました.

1. Update Layer Tree

レンダーの最終レイヤを計算して生成するプロセスです.

レイヤマージ(Layered Merge)でレンダーします.

Layerは速いですが、メモリがたくさんあります.

2. Composite

レイヤーを合成してBitmapを作成するプロセス

paintは層毎paintでありtiled backing store技術を用いた.