最近、技術面接を行うために、フロントエンド開発者のコードインタビューの代表的な問題を調査し、検索したところ、使用している技術にあまり悩みがないことがわかりました.この文章の著者はコミュニティが多すぎて、彼らがお互いに答えたときに反応し、当時の開発者と会社がどんな理由で反応したのか.

どうして

reactとは何かを知る前に、会社が最初にこのライブラリを選択した理由を知っていれば、reactが他のフレームワークよりもいくつかの面でどのような優位性を持っているかを理解しやすいので、私たちはまずそれを作成しました.これらの文章はいずれもAmber、Backbone、Angularの流行時期であるため、Vue.jsに関する話は言及されていない.

1）反応器は一方向データストリームである。

reactの一方向データストリームとUIが開発した宣言的な方法により、アプリケーションをより容易に推定できるため、reactを使用することにした.
-Ian McKay(Netflix)
FluxはReactのアプリケーションアーキテクチャで、一方向のデータストリームに重点を置き、ストリームに従って変化するデータの不変性をサポートします.これにより、データがどこで変更されたかを正確に理解できるため、アプリケーションのテストとメンテナンスが容易になります.
-rmanalang(HipChat)
Reactは、一方向データストリームに基づいて動作するように設計されたビューレイヤです.一方向データモード(一方向バインドとも呼ばれる)とは、興味のある場合に変更可能な参照を持たないように設計されたモードを指す.
バインディング

データとは、2つのデータまたは2つのソースファイルのデータをマッチングおよび同期することを意味する.データベース、スクリーン、親コンポーネント、サブコンポーネントなど.bindからお互い縛り合うとわかりやすいです

既存のAngular.jsでは、テンプレートに変数を定義すると、ユーザーがコンテンツを入力するたびにモデルの値が更新されます.逆に、モデルから新しい値を受信しajaxリクエストに変更すると、ビューにその値が閉じられずに適用され、Webページが更新されます.
Reactでは、毎回データを反映するコードを書かない限り、UIは変更されません.
この点では、単一のデータ・ストリームが利点です.

のデバッグに役立ちます(データは1つの場所から来ているため)、時間旅行のデバッグもできます.

コードは毒性がよく、流れを理解しやすい.

2）応答の仮想DOM

私たちが直面している最大の問題の1つは、不要なワークフローを解消することです.Reactの仮想DOMはDOMを慎重に扱う上で重要な役割を果たしている.
-nathansobo(Atom)
反応チームは、メモリからDOM要素を作成するのは速いが、実際のDOMをレンダリングする過程でボトルネックに遭遇し、この問題を回避するアルゴリズムを作成したことを発見した.仮想DOMを作成し、既存のDOM TREEと比較し、計算結果に従ってレンダリングするだけです.

3)ReactionはUIを関数として設定する.

1つのテクニックは単一責任の原則です.これは理想的な原則であり、1つの素子は1つのことしかできない.1つの素子が大きくなると、より小さなサブ素子に分離する必要があります.

https://ko.reactjs.org/docs/thinking-in-react.html

JavaScriptを知っていれば、誰でもreactionにアクセスでき、フレームワークまたはライブラリにのみ存在する構文が少なく、簡潔です.また、反応器のUIコンポーネントは非常に独立しており、特定の注目点が集中しており、再利用、メンテナンス、拡張が容易である.

宣言スタイルの使用

コマンドタイプよりも複雑さを低減し、可読性を向上させます.

JavaScriptを使用したコンポーネントベースのアーキテクチャ

既存のAngularなどのテンプレートを用いてビューを表示する場合に学習が必要となるという欠点があるが,反応にJavaScriptや注釈を用いてワークロードを削減した.

/* Angular.js */
<ul class="todo-list">
  <li ng-repeat="todo in todos | filter:statusFilter track by $index" ng-class="{completed: todo.completed, editing: todo == editedTodo}">
    <div class="view">
      <input class="toggle" type="checkbox" ng-model="todo.completed" ng-change="toggleCompleted(todo)">
        <label ng-dblclick="editTodo(todo)">{{todo.title}}</label>
    <button class="destroy" ng-click="removeTodo(todo)"></button>
    </div>
    <form ng-submit="saveEdits(todo, 'submit')">
        <input class="edit" ng-trim="false" ng-model="todo.title" todo-escape="revertEdits(todo)" ng-blur="saveEdits(todo, 'blur')" todo-focus="todo == editedTodo">
    </form>
    </li>
</ul>

//React.js
const App = () => {
  const [todos, setTodos] = useState([{id: 1, todos: '코드'}])
  return (
    <ul>
      {todos.map((v,i) => {
        return <TodoItem value={v}/>
      })}
    </ul>	
  )
}

4) React Native

Reactとともに提供される革新的な機能により、新しい開発者を雇うことなく、モバイルiOSとAndroidアプリケーションを構築できます.React Nativeのモバイルポートを使用すると、Javascriptを使用して機能的な基本的なモバイルアプリケーションを作成できます.これにより、開発者はReactJSでWebアプリケーションコードを再利用することで、モバイル開発の速度を速めることができます.

https://railsware.com/blog/why-use-react/

n/a.結論

応答は一方向データストリームで構成され、Webアプリケーションが膨大であればあるほど、デバッグと追跡が容易になります.

応答性の仮想DOMは非常に優れており、頻繁なUIレンダリングでもDOMに負担はかかりません.

反応器にはテンプレートがなく,バニラJavaScriptとhtml表記で構成され,UI単位で抽象化され,開発経験が向上した.

反応物はプラットフォームをまたぐのに有利である.ReactNativeの出現はネットワークからモバイルへの変換過程を大幅に減少させた.