它為了解決什麼問題而生？

正如我在 Day 03 有提到的，它使用了 Virtual DOM 來解決直接操作 DOM 造成的性能問題。並且採用有別於 binding 的方式，反而透過 functional 的撰寫風格簡化了資料與視圖 (View) 的關係，使得即使在大型專案中仍能較保持清晰的管理狀態。

JSX

JSX 是一種語法糖，它能夠讓開發者以類似於 html 的格式描述視圖。

比如^jsx-example：

<div className="shopping-list">
  <h1>Shopping List for {props.name}</h1>
  <ul>
    <li>Instagram</li>
    <li>WhatsApp</li>
    <li>Oculus</li>
  </ul>
</div>

實際上在實行的時候會被轉換成：

/*#__PURE__*/
React.createElement("div", {
  className: "shopping-list"
}, 
/*#__PURE__*/React.createElement("h1", null, "Shopping List for ", props.name), 
/*#__PURE__*/React.createElement("ul", null, 
    /*#__PURE__*/React.createElement("li", null, "Instagram"), 
    /*#__PURE__*/React.createElement("li", null, "WhatsApp"), 
    /*#__PURE__*/React.createElement("li", null, "Oculus")));

雖然我不會在這個細節有太多著墨，不過請好好記住這個語法糖，本系列會讓你體會到什麼叫做「全糖」。

視圖即是函數

y = f(x) → Display Result = View(data)

當我們給定一組的資料，視圖的顯示結果便是基於這組資料，這樣一個特性使得我們能夠把視圖當作是一個函數，並且透過 JSX 我們變得以將這個概念實現並且拿來使用：

const CustomComponent = (props) =>
    <div>
        <h2>{props.title}</h2>
        <p onClick={props.handleClick}>{props.message}<p>
    </div>;

const App = ()=>
    <CustomComponent
        title="OuO"
        message="Awesome message"
        handleClick={()=>alrt("YOOO")}/>;

ReactDOM.render(<App/>, document.getElementById('root'));

Pure Function

Pure Function 是函數導向程式設計 (Functional programmin) 中一個很重要的概念，而這個概念可以說是 React 核心哲學之一，雖然 Javascript 本身就是很 Functional 的語言就是了。XD

Pure Function 指的是：相同的輸入，永遠會得到相同的輸出，而且沒有任何顯著的副作用 (Side effect)，比如：
y(a,b) = 3a+4b*b 這就是一個 Pure Function ；
rand() = X 這是一個亂數函數，每次產出的數值都不一樣，這就不是一個 Pure Function；
save(data) 這個函數把 data 儲存到硬碟去，它有了副作用，因此它不是一個 Pure Function。

因為相同的資料只會得到相同的顯示結果，想要改變顯示結果就只能改變顯示的資料。

小結

它這只是本系列文使用到的工具之一，很難講得很詳細跟清楚，而且關於 React 的文章網路上已經很多了，相信想學的人不用擔心學不會。React 還有一個很重要的概念叫做 hook，只是我不確定對零基礎的人言這個東西好不好理解，畢竟我是在寫了一年的 class component 之後才開始使用 hook 的。

題外話，已經寫了兩年的 React，剛剛翻了個人筆記才發現居然沒有一篇是關於 React 的...