iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
0

什麼是React?

React是由Facebook工程師開發針對UI的前端JavaScript開源函式庫,目前正在被Netflix、Imgur、Instergram、Airbnb等網站做主頁的使用。

用React的好處

1.運用元件化思考,讓元件有封裝並能夠重複使用的特性,元件之間不會互相干擾,也容易維護。
2.很有效率的利用Virtual DOM達到即時更新的效果。
3.使用JSX語法配合Babel輕鬆編寫。

Virtual DOM?

一般傳統的Web使用jQuery進行DOM的操作,DOM使用一個樹狀結構統一 HTML、XML 和 SVG規範,但他超慢的,往往網頁更改了一個小東西,都要重繪一次,在網頁元件多的時候顯得更加低效率以及吃效能,因此React做了Virtual DOM當作虛擬的中介層,使用React的diff演算法讓App與DOM去做比對,只重繪有更新的部分,這樣大大增加了效能。

JSX? Babel?

React使用純JS在前端產生HTML,如果直接用原生的JS會長這樣

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

但它在JSX裡面長這樣

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

是不是看起來簡單而且直覺多了?
但我們要如何把JSX轉變成純JS讓React看得懂呢,這時候就要使用Babel,它會把JSX直接編譯成React看得懂的JS。


下一篇
安裝React
系列文
React6

尚未有邦友留言

立即登入留言