React???

応答は、フェイスブックが作成したユーザUIを構築するためのライブラリである.

の司会者がWebアプリケーションの開発に必要な多くの機能を提供するのとは異なり、ReactionはUI機能のみを提供します.したがって、各開発者は、グローバルステータス管理、ルーティング、および構築システムを直接構築する必要があります.反応チームはcreate-act-appツールを提供し、直接構築する手間を減らした.

行動が必要だ

コードの長さが千行しかないと仮定すると,コードは一目では見えず,可読性が低下する.この場合,他の場所でコードブロックを記述し,他の場所で同じ名前の意味を持つコンポーネントを記述すれば,コード上で容易に見ることができ,実際にウェブページにコードを表示する際には,コードを見ることができる技術が必要となる.
また、変更をリアルタイムで更新でき、メンテナンスが容易です.

Reactの3つの特徴

1.JSX構文

JSXは、JavaScriptでHTML構文を使用してビューを整理するJavaScript構文で、リアクターの開発に役立ちます.

class Hello extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

JSではこのような文法は使えませんが、JSXはそれを可能にします.次のコードを見ると、このJSXがどれだけ便利かがわかります.

class Hello extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

JS構文のように見えますが、HTMLコードは1つのdivだけではなく複雑なはずですが、今のように応答を記述すると、開発者は非常に困難になります.しかしJSXの使用により反応の使用性が多くなり代表的な特徴となったといえる.

2.コンポーネントベース

リアクターはコンポーネントベースのライブラリであり、コンポーネントベースは既存のWebページを作成するときのようにHTMLコードを挿入するのではなく、複数の部分を分割することでコードの再利用性とメンテナンス性を向上させる.
時々長いHTMLコードを書くことがありますが、コードの一部を修正する必要があると言ったら、コードを探すことから始め、私が今修正したコードの一部だけを修正しなければなりません.もし私が間違っていたら、別の部分にぶつかったら、問題を解決するのではなく、かえって問題を増やすことになります.
コンポーネントベースのReactとして開発されている場合は、HTMLコードをローカルファイルとして、ある部分を修正する必要がある場合は、その部分のファイルを修正するだけでよい.

3.仮想DOM（仮想DOM）

仮想DOMは、既存のDOM*の制約から抜け出すために提案された代替案である.
DOMとは?ドキュメントオブジェクトモデルをDocument Object Modelという言葉でコピーします.私たちが使っているHTMLユニットごとにオブジェクトのモデルとして使えばいいのです.
DOMの問題は,まず,DOMの構造がツリー構造であることである.開発者がDOMの要素を変更するために関数を作成して実行すると、レンダリングツリーが再生されます(すべての要素のスタイルが再計算されます).レイアウトの作成と実行のプロセスが再び繰り返されます.
これは、大量のDOM要素を修正するたびに不要な演算が発生することを意味する.レンダリングツリーを再生するたびに推奨されないため、できるだけ1回すべての操作を行うことが望ましい.
この問題を解決するために,仮想DOMが出現した.DOM自体が抽象化された概念であり,その中でもう一度抽象化されたのが仮想DOMである.
仮想DOMは、仮想DOMの変化を予め感知することによって変化する.この操作は実際のDOMではないため、レンダリングも行われず、計算コストが実際のDOMよりも低くなります.仮想DOMの変化を最後に実際のDOMに投影し,すべての変化を一度に提示した.
DOMを直接更新する場合は、更新されていない部分と更新されている部分だけを知る必要があります.仮想DOMは、変更されていない部分と変更された部分を自動的に検出して更新します.
要するに、仮想DOMを使用する理由は、実際のDOMを直接変更することができるが、これは非常に高価な作業であるため、仮想ドーム上で事前に最適化することができるからである.
出典:https://phant0m.tistory.com/29[Devlog]
ソース:https://berkbach.com/%EA%B8%B0%EC%B4%88%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-react-js-1531b18f7bb2