[官網學 React] Tutorial：#2 Overview 概論

7 min readApr 6, 2021

網址（英文）：https://reactjs.org/tutorial/tutorial.html#overview
網址（中文）：https://zh-hant.reactjs.org/tutorial/tutorial.html#overview

上一篇完成了起手式：[官網學 React] Tutorial：#1 Setup

這篇終於要來認識 React 了！

React 是什麼？

React 是一個敘述式的、有效率和彈性的 JavaScript 函式庫，用來建構使用者介面（UI）。
React 讓我們可以用許多小而獨立稱作元件（components）的程式碼組合出一個複雜的使用者介面。

React 有幾種不同的元件，這邊先從 React.Component 開始。

使用範例：

元件透過 render() 回傳並顯現出一個有階層架構的畫面 view。

當我們的資料（name）改變時，React 將會有效率地更新資料並重新渲染這個 React 元件（ShoppingList）。

用這種方式宣告的元件稱作 React 的 component class，或 React component type。
可以當成 DOM 的元件，例如 <ShoppingList />。
自己創造的 React 元件是各自獨立封裝，重複使用多個 <ShoppingList />，它們彼此會是各自獨立運作的。

props ：從父層傳給元件的參數（「properties」的簡稱）
父層是透過 name=”Mark” 傳給 ShoppingList，子層 ShoppingList 用 this.props 接收。

render ：回傳你想在螢幕上看到的呈述。
這裡回傳的是 React 元素（element），這些元素是用輕便的（直覺且簡易）方式描述想渲染的畫面。
官網說大部分的 React 開發者會使用一種讓結構寫起來更簡單的特殊語法，JSX。

下圖兩種語法等價：

用 JSX 寫的 <div/> 在程式建構時（build time）會被轉譯回瀏覽器看得懂的 React.createElement(‘div’)。

JSX 具有 JavaScript 的全部功能，可以將任何 JavaScript 的表達式放在 JSX 內的花括號{}中。

每個 React 元素都是 JavaScript 的物件（object），可以儲存在變數裡，也可以在程序（program）間傳遞。

*在 Tutorial 只會用 JSX 來做，但如果好奇的話，官網也有詳細資料供研究 createElement()：https://reactjs.org/docs/react-api.html#createelement

我預計是先把 Tutorial 走完，再去好好仔細看 Docs。

除了用 class 的方式宣告元件，還可以將元件宣告成函式，例如下圖的 Counter：

圖片來源：https://ithelp.ithome.com.tw/articles/10219287

在 React 16.8 版本之後，出現了 Hooks，使用 Function Components 可以透過個元件自己專屬的 useState 和 useEffect 管理狀態（State）和生命週期（Lifecycle）。

檢查 Starter Code

在 Starter Code 的 JS 中可以看到我們有 3 個 React 元件：

Square 元件：渲染（render）一個 <button>
Board 元件：渲染九個格子，每個格子使用一個 Square 元件
Game 元件：渲染一個 Board 元件，還有目前還沒做的狀態描述

透過 Props 傳遞資料

第一步：將資料從 Board 元件傳給子元件 Sauare

＊官網強烈建議，不要複製貼上程式碼，要自己手打，才能發展肌肉的記憶（手感？）和獲得更深刻的理解。

第二步：子元件 Sauare 使用父層 Board 傳來的資料

讓每個格子出現父層 Board 傳來的值：

以上兩步就是 React 的父層和子元件透過 Props 傳遞資料的流動方式。

建立互動式的 Component

onClick

修改 <button />，讓它在被點擊後會出現警告視窗。

＊官網說為了少打點字和避免 this 的困惑，event handlers 都將使用箭頭函式的語法。

＊onClick 傳遞的是函式，如果不小心寫成 onClick={ alert('click') } 會造成 component 在每次重新 render 時都觸發 alert。

state

React 元件可以在自己的建構子中透過設定 this.state 擁有專屬於自己的狀態（state），這些狀態都單屬於定義它的 React 元件，不會跟別的元件共用。

這次，我們要來讓每個 Square 元件會因為被點擊而在格子出現 X，並且記住自己已經被點擊過了。

第一步：建立建構子（constructor）並定義 this.state

＊在 JavaScript classes 中定義一個 subclass（有 extends）的 constructor 時，會需要呼叫 super。
＊所有的 React component class，凡是有 constructor 的，都應該要從呼叫 super(props) 開始。

第二步：改變 Square 的渲染方式，讓被點擊時顯現當前 state 的值。