《深入淺出React和Redux》(1) - React基礎

語言: CN / TW / HK

create-react-app

React技術依賴的技術棧比較多,比如,轉譯JavaScript程式碼需要使用Babel,模組打包工具要使用Webpack,定製build過程需要grunt或者gulp。create-react-app命令可以免去配置這些技術棧的麻煩,自動生成一個基本的react-app模版專案,讓開發者可以基於這個模版快速開始React應用的開發。 首先要安裝create-react-app命令:

npm install --global create-react-app

然後就可以建立了:

create-react-app <app-name>

元件

React的首要思想是通過元件(Component)來開發應用。所謂元件,簡單說,指的是能完成某個特定功能的獨立的、可重用的程式碼。這與傳統的web開發方式差異很大,以前用HTML來代表內容,用CSS代表樣式,用JavaScript來定義互動行為,這三種語言分在三種不同的檔案裡面,實際上是把不同技術分開管理了,而不是邏輯上的“分而治之”。元件則是按照邏輯(功能)來組織的。

Component作為所有元件的基類,提供了很多元件共有的功能

JSX

JSX, 是JavaScript的語法擴充套件(eXtension),允許在JavaScript中可以編寫像HTML一樣的程式碼。在JSX中使用的“元素”不侷限於HTML中的元素,可以是任何一個React元件,React判斷一個元素是HTML元素還是React元件的原則就是看第一個字母是否大寫。

React的理念

React的理念可以歸結為一個簡單的公式:

UI = render(data)

即render函式,與它接收的data決定了UI渲染的結果。render是一個純函式,它的輸出完全依賴輸入。 對於開發者來說,重要的是區分開哪些屬於data,哪些屬於render,想要更新使用者介面,要做的就是更新data,使用者介面自然會做出響應。所以React實踐的也是“響應式程式設計”(ReactiveProgramming)的思想,這也就是React為什麼叫做React的原因。

但在資料發生變化時,React並不會重新渲染整個頁面,它利用Virtual DOM實現了只渲染差異DOM的特性,渲染效率很高。

Virtual DOM

要了解Virtual DOM,就要先了解DOM,DOM是結構化文字的抽象表達形式,這裡所謂的結構化文字即HTML文字,HTML中的每個元素都對應DOM中某個節點,HTML元素的層級關係對應DOM樹。

瀏覽器在渲染HTML的時候,會先將HTML文字解析以構建DOM樹,然後再根據DOM樹渲染UI,當要改變介面內容的時候,可以通過對DOM進行操作來實現。

Web前端開發關於效能優化有一個原則:儘量減少DOM操作。因為DOM操作會引起瀏覽器對網頁的重新繪製,這是一個相對耗時的過程。

然後Virtual DOM就是對DOM的更高一層的抽象,當React元件發生變化時,React新舊Virtual DOM之間的差異,再根據這些差異來操作真正的DOM。

React利用函數語言程式設計的思想以及資料驅動的模式進行Web頁面的開發,資料的變化觸發的只是Virtual DOM的變化,剩下的部分由React去完成,開發者並不需要關心。

在開發React應用的時候,開發者使用的是宣告式的語法,專注於描述操作的結果,而不用過多考慮操作的細節。

易於維護元件的設計要素

設計元件的時候,應該儘量保持一個元件只做一件事。

如果發現一個元件功能太多程式碼量太大的時候,就可以考慮將其拆分了;但拆分元件時要注意,元件的粒度過粗、過細都不好,這就同“一個元件只做一件事”一樣要看具體的場景。

拆分元件時,最重要也最困難的是要確定元件的邊界,每個元件都應該是可以獨立存在的,如果兩個元件邏輯太緊密,無法清晰定義各自的責任,那也許這兩個元件本身就不該被拆開,作為同一個元件也許更合理。

通用的軟體設計原則也適用於元件的設計:元件應該遵循高內聚、低耦合的原則。

prop和state

React元件的資料分為兩種,prop和state,無論prop或者state的改變,都可能引發元件的重新渲染。prop是元件的對外介面,state用於儲存元件的內部狀態。

prop

一個React元件通過定義自己能夠接受的prop就定義了自己的對外公共介面。props的型別可以是任何一種JavaScript語言支援的資料型別,包括函式。 當prop的型別不是字串型別時,在JSX中必須用花括號{}把prop值包住。 React元件不能修改傳入的prop的值。

propTypes用於定於元件的介面規範: 首先倒入PropTypes

import PropTypes from 'prop-types';

在[classname].propTypes中新增對props的限制,比如下面的程式碼限制caption欄位為string型別,而且isRequired必須傳值。

Counter.propTypes = {
  caption: PropTypes.string.isRequired
}

這些新增的限制,會被用於執行時和靜態程式碼檢查,據此來判斷元件是否被正確地使用。 但這種限制並不是強制的,即使被違反,元件仍能正常工作,但會在瀏覽器的console裡丟擲警告資訊。

propTypes可以幫助在開發階段儘早發現程式碼中的問題,但是最好不要帶到產品環境中,babel-react-optimize可以在釋出產品程式碼時自動移除定義的propTypes。

defaultProps可以用來為props中的欄位定義預設值:

Counter.defaultProps = {
  initValue: 3
};

state

state用來記錄元件自身資料的變化。 state的初始化要在元件的建構函式中進行,通過為this.state賦值就完成了其初始化:

this.state = {
  count: props.initValue
};

元件的state必須是一個JS物件,即使元件需要的只是一個數字型別的欄位,也必須把它作state的一個欄位。

通過this.state可以讀取其中的值,比如this.state.count.

修改state的值必須通過this.setState()方法進行:

this.setState({ count: this.state.count + 1 });

直接修改並不會生效,這是因為setState除了會修改state的值外,還會觸發頁面的重新渲染。

元件的生命週期

在一個React元件的生命週期中,會經歷三個過程:

  • 裝載過程(Mount),也就是把元件第一次在DOM樹中渲染的過程;
  • 更新過程(Update),當元件被重新渲染的過程;
  • 解除安裝過程(Unmount),元件從DOM中刪除的過程。

裝載過程

元件第一次被渲染時,主要會呼叫如下函式:

  • constructor
  • render
  • componentDidMount
constructor

並不是每個元件都需要定義自己的建構函式,在下面的情況下,元件才需要定義建構函式:

  • 初始化state,如果元件包含state,就需要在建構函式初始化;
  • 繫結成員函式的this環境
render

一個React元件可以忽略其他所有函式都不實現,但是一定要實現render函式,因為父類React.Component類對除render之外的生命週期函式都有預設實現。 render函式並不做實際的渲染動作,它只是返回一個JSX描述的結構,最終由React來進行渲染。 render函式應該是一個純函式,完全根據this.state和this.props來決定返回的結果,而且不要產生任何副作用。

componentDidMount

React在根據render返回的結果來渲染頁面的時候,componentDidMount會被觸發,但它並不在render執行後立即觸發,要等React庫根據所有元件的render都執行完。

更新過程

更新過程主要會呼叫如下函式:

  • shouldComponentUpdate
  • render
  • componentDidUpdate
shouldComponentUpdate

shouldComponentUpdate也是一個非常重要的函式,它的返回值是bool,決定是否應該重新渲染元件。 需要優化效能時,可以定製shouldComponentUpdate。父類React.Component中的預設實現方式是始終返回true。定製時可以對比state與props,只有變化時才更新。

解除安裝過程

解除安裝過程只涉及一個函式componentWillUnmount,當React元件要從DOM樹上刪除掉之前,對應的componentWillUnmount函式會被呼叫,所以這個函式適合做一些清理性的工作。 比如在componentDidMount中用非React的方法創造了一些DOM元素,如果撒手不管可能會造成記憶體洩露,那就需要在componentWillUnmount中把這些創造的DOM元素清理掉。

元件向外傳遞資料

通過prop可以從父元件傳遞資料給子元件,很多時候也需要將資料從子元件返回給父元件,這時仍然可以利用prop來實現。 prop支援任何型別的JavaScript物件,包括函式,函式可以像其他物件一樣作為prop的值從父元件傳遞給子元件,又可以被子元件作為函式呼叫,於是可以藉助函式將資料從子元件返回給父元件。

但這種傳遞方式在涉及到多個、多層元件之間的資料傳遞時就比較複雜了,多層元件的資料需要層層傳遞,平級元件之間的資料又需要依賴父元件的中轉,可能導致資料冗餘、資料流混亂。接下來看看redux是如何解決這類問題的。

參考書籍

《深入淺出React和Redux》 程墨

分享到: