- 增加維護性和擴充性: 可以將相同的元件或是功能,製作能 component,減少重複性。
- 提升效能: 透過 virtual DOM 比對資料更新,比對修改前後的樹狀結構,更新對應的 DOM 元素。在過去開發會直接且頻繁地修改 DOM 元素,就會有明明資料相同卻又重新渲染的情況發生。
- 開發只需關注資料: 利用 state、props 即可讓畫面隨著變數更改對應更新,過往開發除了更新資料外還要自行把更新後的資料再寫回 DOM 元素中,讓開發變得相對繁瑣。
在中大型專案上還是建議使用 React,因為有元件 (Component) 的幫助讓專案擴充、更改變得相對容易。如果是小型專案,像是一頁式的活動宣傳頁就不一定,拿來設計 React 的 state props 資料狀態的時間用 jQuery 直接綁定 DOM 的寫法可能一下子就做完了,jQuery 簡單暴力,在小專案上還是滿好用的。
React 開發從資料去思考,我們只要去設計如何操作資料,React 會幫我們處理渲染的部分。 過去開發是直接對 DOM 元素進行操作,除了更改資料也要自行更新 DOM 元素。
state: 是自身 component 的狀態、資料。 props: 是從 parent component 傳來的資料。