fbpx

操作完簡單的 Javascript 實作後,馬上來進到下一步 —— 認識重量級函式庫!

那~ 我們馬上來看看 React.js 能帶給我們哪些便利之處吧~

本篇日記針對 React 的十大特點做概括性的介紹 希望新手朋友們看完此篇對於 React 就能有最基礎的認識&了解 😆

 

1. React 超基本介紹

  • 為 Javascript 的函式庫
  • 用於建造可重複使用、元件化、具互動性的 UI (User Interfaces) 使用者介面
  • 打造 SPA (Single Page Application) 單頁式應用程式

 

2. 環境 IDE

React 可直接性的在 HTML 中撰寫,但需要額外導入三行程式碼,分別是 React、ReactDOM 和 Babel (Babel 用於解讀 JSX)。

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>

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

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

但若有真實產出需要,上述將 React 寫在 HTML 的方法可能還不足以應付開發需求,那這時你就會需要安裝 NPM、Node.js 和 create-react-app,安裝完畢上述三者後再輸入命令 npx create-react-app my-app 後於 terminal 下指令 npm start 就能打開瀏覽器(http://localhost:3000)檢查安裝結果了👍 正確的執行結果你應該會看到 React 的 logo 在轉,搭配「Welcome to React」的字樣

 

3. Virtual DOM

不會直接操作瀏覽器的 DOM,改採智慧式「需更新再更新」模式,先將原始 DOM 和 React 的虛擬 DOM 比照,再將更動之處同步 DOM 到記憶體上,減少重新操作的時間成本和記憶體的損耗。

 

4. Class 

我們在寫 Javascript 時常常聽到的 ES6 (ECMAScript 6) 寫法也可以用於 React,常見的功能有:class、arrow function 和 let & const,有鑒於前面幾篇日記已經多次聊到 block scope 和 let & const 的用法(arrow function 箭頭函式也在白科圖鑑中談過),這裡就先不贅述後兩者,今天就著重介紹 class

 

首先,帶大家看看最簡易的 class 寫法

class Color {

constructor (name) {

this.hue = name;  

}

dress () {

return ‘She is in ’ + this.hue + ‘dress’; 

}

}

mycolor = new Color(“red”); 

mycolor.dress(); // She is in red dress

class 其實就是一種變形的函式 (function),其寫法為直接將 class 寫出,用以製造一個新的類別~  By the way, 建立一個 class 需要 constructor 的協助,好比說初始化物件的狀態、property 和 method 

class Fashion extends Color {

constructor(name, trd) {

super(name);

this.trend = trd;

}

statement () {

return this.dress() + ‘, she is a ’ + this.trend + ’icon.’

}

}

mycolor = new Fashion (“red”, “Gucci”);

mycolor.statement(); // She is in red dress, she is a Gucci icon.

 

當然,為了提升撰寫效率,class 允許「繼承 (inherence)」功能,為的就是將已經寫好的 method 傳遞給其他擁有相似特徵的 class。操作上很簡單,只需要使用關鍵字 extends 就可以將寫好的 class 有效率地套用在其他需要的 class 之中。另外,在 constructor 裡呼叫 super 關鍵字代表的就是直接性的參照父類別 (parent class),將父類別的 property 和 method 移植到子類別之中

 

與 class 相對的概念就是 React 中的 functional component。顧名思義 functional component 就是直接從 Javascript 的 function 延伸出來的寫法, 在寫法上 functional component 沒有狀態(stateless),也沒有 this,相較於 class component 也比較簡潔、乾淨,當然這也關乎到執行的效能和效率

🦘補充:React 16.8 的 Hook 使 functional component 也能「勾」上類似 state 的功能,如此一來就可以更簡潔、快速的表達 state 和生命週期,而 hook 的種類有 useState、useEffect、useContext 等等

function Welcome(props) {

  return <h1>Hello, {props.name}</h1>;

}

export default Welcome; //

5. Render & return

Render 看起來很玄妙,不過其實就是將元素渲染到 DOM 上的過程,最經典也是最常見的 render 案例就是 ReactDOM.render(),ReactDOM.render() 負責的是最後輸出的關鍵任務,將 React 中虛擬 DOM 元素轉變為實體 DOM 元素

function Welcome(props) {

  return <h1>Hello, {props.name}</h1>;

}




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




ReactDOM.render(

  element,

  document.getElementById('root')

);
class Welcome extends React.Component {

  render() {

    return <h1>Hello, {this.props.name}</h1>;

  };

};




ReactDOM.render( Welcome , document.getElementById('root'));

Class component 透過 render 產出虛擬 DOM;則 Functional component 會透過 return 回傳預先建立的虛擬 DOM, 因此我們可以透過兩者來建立視覺元件,前者的方法運用了 ES6 的特性,是使用了class 處理,後者使用 React 16.8 hooks 搭配進行元件化。 

6. JSX

JSX 指的是 Javascript Syntax Extension,也就是 Javascript 和 XML 的語法混合體,因此剛開始學習時會有種似曾相似又陌生的感覺。最經典的例子如以下(參考官方網站):

const element = <h1>Hello, world!</h1>;

 

若僅使用 Javascript 撰寫,會需要額外寫非常多 code(像是React.createElement 等等),請看以下:

var element = React.createElement(

  "h1",

  null,

  "Hello, world!"

);

由以上兩個例子我們就會發現到 JSX 的迷人之處,JSX 合併了 HTML(也就是 markup)和Javascript 的邏輯,集結成的綜合體恰好成全了 React component 的便利性。當然,我們可以選擇 JSX 的方式寫 React,也可以捲起袖子毛起來刻 Javascript~ 但相對的在效率和除錯上就會有許多不利的地方,以下是 JSX 經典範例:

const name = 'Josh Perez';

const element = <h1>Hello, {name}</h1>;

如果在 HTML tags 中要加入 Javascript 的表達式,則需要使用花括號 { } 包裹,如以上範例的 name。另外,Javascript 的表達式有非常多種,包括簡單的加減乘除、節點、函式… 

7. Component

Component 是 React 中最小的單位,也是一個網頁的組成要素。換句話說,每個使用 React 寫的網頁的任一個小功能、小區域都是由 component 構成(你可以把 component 想成是一塊塊的樂高,透過不斷堆疊、組合、變化,最後組合成或大或小的成品… 一面牆、一輛車、一間房子、一個網頁元素… ),這樣的 component 不難想像十分有彈性,不僅能重複使用也能獨立存在

 

🧬 Component 特性列舉:

  • 可大可小
  • 可重複使用、彈性高
  • 大寫表示

🧯注意:習慣上只要為 React component 都以大寫字母開頭為主,小寫則是保留給 HTML 元素

 

8. Prop, State

接著我們來介紹 React 中非常重要的兩個觀念:prop 和 state,以下會條列出他們各自的特性,讓你們更認識這兩個核心的觀念

Props 

  • 為 property 的縮寫
  • Read-only 唯讀:表示 coder 不能隨意更改 props 的值,這樣一來可以確保資料的正確性和完整性,也能使資料處理上更加穩定、安全
  • props 為繼承而來(由父元件傳至子元件)

State

  • state 可自行定義,也可更改(若需更改則使用 this.setState)
  • state 的更改可為非同步 (asynchronous)
  • 僅能作為 props 傳遞到子元件,不能直接傳遞

 

9. Event

React 中的事件如 HTML 上操作一般,有 click、change、mouseover 等事件

 

🧯注意:Event 需要以 camelCase 命名,且事件控制 (event handler) 須寫在花括號內;JSX 是以 function 傳遞事件控制,而非字串 (string) 

10. Lifecycle

React 的生命週期有三階段,分別是 Mounting、Updating 和 Unmounting,這三個階段可能從 3 > 1 > 2 (方法於事件發生執行)或是 1 > 2 > 3 (方法於事件發生執行)都有可能

 

首先,Mounting 階段我們會將元素放入 DOM 中,以下是在 Mounting 你會看到的方法:

 

constructor() 

getDerivedStateFromProps()

render()

componentDidMount()

 

四個方法中唯獨 render() 是每次更新 props 和 state 必須,其他都是可加可不加。若沒有執行 render(),就無法將產出渲染至 DOM 上,也算是做白功了。  

 

第二階段:Updating 更新

當元件 (component) 的 state 或 props 有變動時,元件就會重新被更新過一輪,那更新的過程就會需要用到以下五種方法~ 同理,render() 是唯一的必須

 

getDerivedStateFromProps()

shouldComponentUpdate()

render()

getSnapshotBeforeUpdate()

componentDidUpdate()

 

最後,Unmounting 卸載

這個階段相對簡單和單純,僅有一個 componentWillUnmount() 負責將元件移除 DOM

 

介紹完十個 React.js 知識點~ 相信你們應該對於 React 的使用和寫法有一定的瞭解🤩 那如果身為 Javascript 或 React 覺得我的日記對你的學習有幫助,也歡迎你加入「程式小白學習群」~

小白群是什麼? 在幹嘛?

  • 小白群由文科小白所創,希望幫助學習 Python & Javascript 的朋友們度過難熬的撞牆期
  • 加入小白群能和同樣在努力學習程式的朋友們交流切磋
  • 我也會在小白群釋出最新的文章和學習資訊~ 在初學之路的朋友千萬別錯過了喲🤩

 

參考資料:

  1. https://medium.com/@madhupathy/learn-basics-of-react-js-in-3-minutes-a94cbc6f02c8
  2. https://dev.to/spectrumcetb/beginner-s-guide-to-react-js-15lm
  3. https://www.fooish.com/reactjs/handling-events.html
  4. https://www.google.com.tw/amp/s/www.freecodecamp.org/news/react-components-jsx-props-for-beginners/amp/
  5. https://blog.kalan.dev/function-component-to-hooks/
  6. https://hugh-program-learning-diary-js.medium.com/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6-react-%E7%94%9F%E5%91%BD%E9%80%B1%E6%9C%9F-ec100a159e1e
  7. https://www.w3schools.com/react/react_events.asp
  8. https://reactjs.org/docs/components-and-props.html
iris

iris

我是踏踏實實的程式小白🙆‍♀ 今年開始學習 JS 和 React~ 這邊專放我學習時的筆記和心得📒 如果喜歡我的文章不妨加入我一起學習💪 營造有趣學習程式大圈圈

Leave a Reply