###### tags: React筆記

React筆記
===

JSX
---
* 我長這樣：

const element = <h1>您好呀！</h1>

寫過程式都知道，這不是字串也不是html語法。
字串要有雙引或單引，HTML也不會有變數宣告。

這其實就是JSX，融合了HTML與Javascript。
在React世界裡，也有人稱呼JSX為一個element。
* 執行JSX會產生React Element。
* React.createElement會產生React Element，如下：

const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello World!'
    }
}

這些東西決定了你的畫面長怎樣。
React會把你給的這些物件的描述轉換成DOM並且保持他們是最新的狀態。

如何把React Element Render到DOM上
---
* 與瀏覽器的DOM不同，React element是單純的物件，如上所看到的。
* React DOM會負責更新DOM，來符合React element所描述的內容。
那麼React element到底是如何render到DOM上的？
首先，先說一下root DOM node，以下:

const root = <div id="root"></div>

通常在開發React應用程式時，會建立一個Root DOM node，所有包含在內的React element都是由React DOM做管理。
假設你想要render一個React element 到root DOM node：

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

更新已經被Render在畫面上的Element
---
* React Element是immutable，一旦被建立出來就不能改它的children或props，因此你想讓畫面更動就是建立一個新的element，然後再呼叫ReactDOM.render()。通常不會這樣啦！後面會提到state可以做到這件事。
* 但是ReactDOM在真的更新畫面之前，會先將新的element與children與先前的element與children做比較，為的是增叫效能，只更新必要的元件。

React Component 與 Props
---
* 以函數式component為例，需接收一個props物件並回傳一個React element。

回顧：React element，可以是自定義的component
---
以下是一般常見的element：

const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello World!'
    }
}
//其實就是
const element = <h1 className="greeting">'Hellow World!'</h1>

但其實可以是component：

const element = <Welcome name="Sara" />;

// 等價於
const element = {
    type: 'Welcome',
    props: {
        name: 'Sara'
    }
}

當React看到使用者自定義的component當作element時，他會將該JSX的屬性和children變成一個object並傳給該component，這裡的object就是props。

抽離component
---
* 不要介意拆分多個component，拆分後的component，建議以component的角度為props命名。

Props是唯獨的
---
* 所有的React component都必須像Pure function一樣，不可去更改props。

React事件與DOM事件
---

setState為何要使用不可變值
---

setState同步還是異步
---
* 可能是同步或非同步。
* React會將多個setState()呼叫批次處理，是為了提高效能；也正因為props和state可能是非同步被更新，因此不要依賴他的直再去計算新的state。
* 你想解決這個問題可以是用另一種型態的setState()。

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

setState何時會合併state
---

React函數組件與class組件
---