Reactガイドを読んでいくその3

これは

Reactのガイドを読んでいく記事です

ガイドのリンク

ja.reactjs.org

要素のレンダー

要素とはReactアプリケーションの最小単位の構成ブロック。
const element = <h1>Hello, world</h1>; React要素はDOM要素とは異なりプレーンなオブジェクトで、簡単に作成可能。
コンポーネントとは少し異なる概念であるため、混同しないよう注意する。

要素をDOMとして描画する

例えばHTMLのなかに

要素があった場合、
この中にある全てがReactDOMによって管理される。

レンダリングされた要素の更新

React要素はイミュータブルで要素を作成すると子要素、属性を変更できない。
UIの更新をするためにはReactDOM.render()に新しく作成した要素を渡すことだけ。
例：時計 setInterval()のコールバックからReactDOM.render()を毎秒呼び出し

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
      <h2>It is Korean {new Date().toLocaleTimeString("ko-KR")}.</h2>

    </div>
  );
  // highlight-next-line
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

React は必要な箇所のみを更新する

毎秒UIツリー全体を表す要素を更新するように作成されたアプリでも必要な箇所だけを更新する。

※CodePenの場合はDevlop viewに変更してからデベロッパーツールで確認する

今日はここまで。