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》 程墨
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/257342.html
標籤：其他