# 10/23

## React

React.js (以下簡稱 React ) 是 Facebook 在 2013 年所發表的一個處理前端 UI 的開源函式庫，一般被認為是 MVC 設計理念中的 View，他實現了前端 UI 的高效率、高性能開發。

### Compontent
React 的核心思想是：component。

將 UI 切分成許多個 component，每個 component 中定義了這個 UI 元件的特性與狀態，並且component中也可以是另一個更小的 component ，透過層層嵌套與交互使用來組合出你所需要的整個 View 。

這樣做的好處是，有更好的可組合性與可重覆使用性，並且更貼近於物件導向的開發理念，可以進行抽象化、封裝，甚至是繼承。

( figure : https://medium.com/%E6%8A%80%E8%A1%93%E7%AD%86%E8%A8%98/react-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-2-%E5%BB%BA%E7%AB%8B%E4%B8%80%E5%80%8B-todo-list-%E4%BE%86%E7%90%86%E8%A7%A3-state-%E8%88%87-props-94c2a77ee023 )

### Virtual DOM
DOM 操作的效能成本非常的高，以往在網頁要更新頁面，總是需要重繪整個頁面。
但當需要不斷增加元件時，就會一直導致頁面的重繪，影響效能。
React 建立了一套虛擬 DOM（Virtual DOM，以下簡稱 Virtual DOM）的機制，程式記憶體中將有一份對應真正 DOM 的 Virtual DOM ，其為 JS 物件，以代管 UI 儲存的資料與邏輯。
當一個 UI 因為資料改變而需要進行畫面變動的時候，React 會根據新的 UI 狀態重做一份新的 Virtual DOM Tree，並且與變動前的舊 Virtual DOM Tree 以 Diff 演算法進行比對，然後其中的差異才會真正的由 React 自動幫你更新到實際的 DOM 上，反應出畫面的變更，而不會每次都重繪整個頁面。
而因為JS的速度比操作DOM快上許多，因此雖然多了一個生成Virtual DOM並比較差異的步驟，但實際所花費的時間遠比重繪整個頁面的DOM低。
透過 Virtual DOM 的機制，開發者將不必煩惱如何操作 DOM，而可以專心於撰寫 UI 的定義與互動邏輯。並且由於 React 能夠自動去最佳化的處理 DOM 操作，前端 UI 程式將可以有效的降低操作成本而達到優秀的效能。

(figure : https://hackmd.io/_uploads/Hys2SM4Ga.png )

Reference:
* https://medium.com/something-about-javascript/react-react-%E4%BB%8B%E7%B4%B9%E5%8F%8A%E7%90%86%E8%A7%A3-e7f90565350b
* https://j6qup3.github.io/2016/08/06/%E7%8C%B4%E5%AD%90%E4%B9%9F%E8%83%BD%E7%9C%8B%E6%87%82%E7%9A%84-React-%E6%95%99%E5%AD%B8-1/

### React element
React element 是代表 DOM 節點的物件。

需要在``` <script>```中導入React和ReactDOM。

<script 
  src = "https://unpkg.com/react@16/umd/react.development.js">
<script
  src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"

要注意的是這邊導入的版本為development開發板。

建立 React element ：

const dish = React.createElement("h1",null,"Baked Salmon");

渲染頁面：

React.render(dish, document.getElementById(root));

## 第一週
1. 為什麼會想加入React讀書會？
其實算是被別人推坑（？
主要是可以看到別人怎麼樣去理解同樣的事物，比較能讓自己拓展視野。
2. 了解React讀書會的運作規則後，你預計用什麼樣的方式參與？
跟隨每週進度與規則來讀書、撰寫筆記。
3. 你預期在這本書裡得到什麼？
能運用React自如，進而提升自己的前端技術。
4. 有什麼其他想和大家說的嗎？
第一次參加讀書會，還請大家多多指教。