2021-07-01-React概觀

前言：
最近因為要換新工作的緣故，必須使用到 React 框架，目標在到職前至少把一些基礎概念先上手，這樣未來工作也比較好手。

---

參考資料：
大神來六角影片
課堂練習

---

學習方法

學習一份新技術前，最重要的兩件事

1. 第一件是，如何找到學習資源。
2. 第二件事，如何找到 EcoSystem呢？

以下資源為比較重要的 KeyMan 跟 社群

• Dan Abramov : Facebook React Core Team
• Kent C.Dodds : Paypal Enginner
• ReactJS.tw 社群

早期開發注意重點

1. Memory leak
2. Event binding
3. Timer clock - Array key
4. Array index issue

Life Cycle

componentWillMount、componentWillUpdate、Componentwillreceiveprops
這三個生命週期，目前已經被棄用
原因主要在於我們可以從字面上意思來看，他是在元件 DOM 掛載前的狀態，但是 Will 又代表可能發生、也可能不會發生，代表我們在這狀態上如果做一些事情，如撈取資料等情況，就是資料可能部會產出

這樣就搞笑啦~
所以現在如果要在 DOM 掛載前，做一些事，目前照懷恩講師解法是直接將這兩個狀態放進
ComponentDidMount 中

One way Data Binding

1. 有資料才有畫面
2. 畫面不能改變資料

Function As Element

Function 就是元件
Component (元件) 首字必須大寫

Inline Style

在 React 中不論是 Inline Style 、Function 命名都是以小駝峰命名方式，原因應該就是方便統一跟管理。

1. 在 React 中 function 或是 InlineStyle 都必須先用 { } 包起來，裡面可以放物件、function 都可以

function InlineStyleColorUsing(){
   const colorRed = {
          color:red;
      };
   return (
    <div>
      <div style={colorRed}>Hi, I have color.</div>
      <div
        style={{
          backgroundColor: "black",
          color: "white"
        }}
      >
        Hi, I have background color.
      </div>
    </div>
  );

}

JSX

我們可以在 JavaScript 裡面寫 HTML、CSS，但她又不是直接寫而是透過 Babel 幫我們編譯這些程式語言。連結

//JavaScript
function MyComponent() {
	return <div>Hello World</div>
}

// Babel 編譯
function MyComponent() {
  return React.createElement("div", null, "Hello World");
}

React.createElement(MyComponent, null);

觀看心得

1. React 寫起來真的很 JavaScript，我目前看下來是還蠻喜歡的
2. 既然都是 JavaScript，那對於 JS 要求就相對高一些，如 事件、this、fetch、箭頭涵式、array 陣列使用阿等等 觀念跟用法就必須更熟悉
3. 打包工具 WebPack、Babel、GitFlow使用這些也是我最近要複習