React 的技術特點讓您能無痛的創建互動式介面。您只需描述應用程式內的畫面在各個狀態的呈現, React 便會高效的根據資料變動來更新畫面。
宣告式的介面撰寫讓您能更好地掌握程式邏輯及除錯。
在 React 中,我們撰寫高聚合低耦合的元件,並藉由組合他們來構建複雜的畫面。
此外,因為藉由 JavaScript 而非樣板描述元件邏輯,您可以很輕易的在應用程式內調動大量資料並不影響實際的 DOM 佈局。
React 對應用程式不做任何多餘的假設,是以您可以很容易的重新撰寫既存的程式碼。
除了在瀏覽器執行之外,React 同時可在伺服器端 (藉由 Node) 及手機應用內 (藉由 React Native) 執行。
React 元件提供了 render()
函式,藉由輸入資料來輸出希望顯示的畫面。下面這個範例使用了被稱為 JSX 的類 XML 語法。render
所需的資料從 this.props
裡取得。
使用 React 並不一定得使用 JSX。 請到 Babel REPL 看看如何只使用 JavaScript 渲染畫面。
有別於來自外部的資料 this.props
,一個元件也可以擁有其自身的內部狀態 - this.state
。當元件的內部狀態改變時,render()
也會被觸發。
藉由 props
及 state
,我們可以建立一個簡單的待辦事項應用程式。下面這個案例我們使用 state
紀錄目前的使用者輸入的清單。所有的事件響應函式是以 event delegation 的方式實作。
React 十分有彈性,它讓您很容易掛載其他第三方的函式庫及框架。下方的範例掛載了一個 Markdown 函式庫 remarkable,讓 <textarea>
的內容值能即時顯示。