初めてのREACT-v5

# JSフレームワークの特長である差分検知って何？

よくJSフレームワークは早い!や効率良い！と言われていますがなぜそうなのかという説明をしていきたいと思っています。

JSX,REACT,REACT DOMが既に入っているこちらのIDEを使って一緒に進めていくとやりやすいです。
https://jscomplete.com/playground

# 通常のJSとReactの比較

document.getElementById('mountNode').innerHTML = `
	<div>
    Hello HTML
    <input />
    <pre>${(new Date).toLocaleTimeString()}</pre>    
  </div>

`;

ReactDOM.render(
  React.createElement(
    'div', 
    null, 
    'Hello React',
    React.createElement("input", null),
    React.createElement("pre", null, (new Date).toLocaleTimeString()),
  ),
  document.getElementById('mountNode2'),
);

今回は"文字列","入力ボックス","現在時刻の表示"をしている二つの出力を用意しました。
上はJSとHTMLで書かれたもので、下はReact APIで書かれたものとなります。
二つを並べてみると、Reactの方が冗長でhtmlの方が直感的にかけるように見えますよね。
なぜ世の中のフロントエンドはReactを含んだフレームワーク使いたがるのでしょうか？
新しくReact APIを学ぶ意味の一つを説明したいと思います！！

# タイムスタンプを毎秒刻みにすると？

const render = () => {
  document.getElementById('mountNode').innerHTML = `
	<div>
    Hello HTML
    <input />
    <pre>${(new Date).toLocaleTimeString()}</pre>    
  </div>
  `;

  ReactDOM.render(
    React.createElement(
      'div', 
      null, 
      'Hello React',
      React.createElement("input", null),
      React.createElement("pre", null, (new Date).toLocaleTimeString()),
    ),
    document.getElementById('mountNode2'),
  );
}
setInterval(render, 1000);

上記のコードを実行してみるとタイムスタンプの文字列が毎秒変化していることが確認できるはずです。
ここで、htmlで出力された入力ボックスに何か書き込んでみてください！



おや、何かを入力してみようとしても入力ができません。
これは毎秒変化させたので全てのDOMノードが廃棄されて再生成されるようになっているのです。

一方ReactAPIの方ではどうでしょうか
入力ボックスに文字列を入れても破棄して再生成されないですよね？
何が起こっているかというと、Reactの場合DOMノード全体ではなく、タイプスタンプテキストにのみ更新を行っている為です。

検証ツールで二つの要素を比べるとさらにわかりやすいかと思います。

# 仮想DOM

Reactではなぜこのようなことが可能なのかというと、最後のUIバージョンをメモリに保持して、ブラウザに変更点があるとその新しい箇所を描画し再度保持してくれる仕組みになっています。
これのUIバージョンを一時的に保持しているものこそが仮想DOMと言われるものです。

# まとめ

HTMLとJSだけで今回のようにpre要素だけレンダリングするという実装を行おうとすると最初にDOMツリーで変更が必要な要素を見つけて、その内容を変更する為にいくつかのロジックを追加する必要があります。
しかし、Reactを含めたフレームワークではこの仮想DOMを利用してユーザーインターフェースの更新について複雑なことを取り除いてくれることがわかったと思います。
このことにより、データと状態、およびそれらをどうするかについて考えることに集中できるようになるのです！