React 入門基礎(chǔ)教程

React概覽React的核心思想是：封裝組件，各個(gè)組件維護(hù)自己的狀態(tài)和UI，當(dāng)狀態(tài)變更，自動(dòng)重新渲染整個(gè)組件。

基于這種方式的一個(gè)直觀感受就是我們不再需要不厭其煩地來(lái)回查找某個(gè)DOM元素，然后操作DOM去更改UI。React大體包含下面這些概念：

組件JSXVirtualDOMDataFlow

大綱開發(fā)環(huán)境配置JSX組件生命周期事件和屬性DOM組合組件組件間通信Mixins表單打包發(fā)布學(xué)習(xí)資源開發(fā)環(huán)境配置npminit創(chuàng)建項(xiàng)目安裝Webpack:npminstall–gwebpackWebpack使用webpack.config.js的配置文件package.json配置文件.babelrcbabel配置文件js目錄結(jié)構(gòu)：JSXJSX簡(jiǎn)單來(lái)說(shuō)就是為了把HTML模板直接嵌入到JS代碼里面，這樣就做到了模板和組件關(guān)聯(lián)，但是JS不支持這種包含HTML的語(yǔ)法，所以需要通過(guò)工具將JSX編譯輸出成JS代碼才能使用。組件React組件兩個(gè)核心概念props就是組件的屬性，由外部通過(guò)JSX屬性傳入設(shè)置完成。state是組件的當(dāng)前狀態(tài)，可以把組件簡(jiǎn)單看成一個(gè)“狀態(tài)機(jī)”，根據(jù)狀態(tài)state呈現(xiàn)不同的UI展示。一旦狀態(tài)（數(shù)據(jù)）更改，組件就會(huì)自動(dòng)調(diào)用render重新渲染UI;可以通過(guò)this.setState方法解法組件生命周期一個(gè)組件類必須由調(diào)用React.createClass創(chuàng)建，并且提供一個(gè)render方法以及其他可選的生命周期函數(shù)、組件相關(guān)的事件或方法定義。組件分為三個(gè)階段：實(shí)例化、運(yùn)行時(shí)及銷會(huì)&清理期首次使用一個(gè)組件時(shí)，以下這些方法依次被調(diào)用:（實(shí)例化）getDefaultPropsgetInitialStatecomponentWillMountrendercomponentDidMount當(dāng)狀態(tài)改變，以下這些方法依次被調(diào)用:(運(yùn)行時(shí))componentWillReceivePropsshouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdate銷毀，當(dāng)該組件使用完成，componentWillUnmount方法將會(huì)被調(diào)用。（銷毀）組件生命周期之實(shí)例化getDefaultProps對(duì)于組件，這個(gè)方法只會(huì)被調(diào)用一次，對(duì)于父組件指定的props屬性，默認(rèn)設(shè)置為該組件的props值。getInitialState這個(gè)方法只會(huì)調(diào)用有次，用于初始化組件的state。componentWillMount只會(huì)調(diào)用一次，在render（渲染）之前調(diào)用，這也是在render方法調(diào)用前修改組件state的最后一次機(jī)會(huì)renderrender方法是必須的。這里會(huì)創(chuàng)建虛擬DOM。

componentDidMount在render方法成功調(diào)用并且真實(shí)的DOM已渲染后，可以在componentDidMount內(nèi)部通過(guò)this.getDOMNode()來(lái)獲取相應(yīng)DOM節(jié)點(diǎn)。組件生命周期之運(yùn)行時(shí)componentWillReceiveProps組件在接收到新的props時(shí)候調(diào)用，在初始化渲染時(shí)不會(huì)調(diào)用；一般是通過(guò)父組件來(lái)更改propsshouldComponentUpdate在接收到新的props或state時(shí)在渲染之前調(diào)用，如果該方法返回false,則render()將不會(huì)執(zhí)行。componentWillUpdate在接收到新的props或state之前將被調(diào)用。componentDidUpdate在渲染成功后將被調(diào)用，和componentDidMount方法類似。組件生命周期之銷毀&清理期componentWillUnmount在組件從DOM中移除的時(shí)候被調(diào)用；比如在componentDidMount執(zhí)行了setInterval()方法，在移除組件前可以通過(guò)componentWillUnmount方法來(lái)clearInterval()方法來(lái)結(jié)束任務(wù)事件和屬性之事件剪貼板事件onCopyonCoutonPaste鍵盤事件onKeyDownonKeyPressonKeyUp焦點(diǎn)事件onFocusonBlur表單事件onChangeonInputonSubmit鼠標(biāo)事件onClickonContextMenuonDoubleClickonDragonDragEndonDragEnteronDragExitonDragLeaveonDragOveronDragStartonDroponMouseDownonMouseEnteronMouseLeaveonMouseMoveonMouseOutonMouseOveronMouseUp觸控事件onTouchCancelonTouchEndonTouchMoveonTouchStartUI事件onScroll滾輪事件onWheel事件和屬性之屬性HTML的屬性和標(biāo)簽在React中大部分都被支持class在React中使用className替換

DOM操作findDOMNode()當(dāng)組件加載到頁(yè)面之后，可以通過(guò)ReactDOM.findDOMNode()方法拿到組件對(duì)應(yīng)的DOM元素Refs通過(guò)在DOM元素上面設(shè)置一個(gè)ref屬性指定一個(gè)名稱，然后通過(guò)

來(lái)訪問(wèn)對(duì)應(yīng)的DOM元素。組合組件使用組件的目的就是通過(guò)構(gòu)建模塊化的組件，相互組合組件最后組裝成一個(gè)復(fù)雜的應(yīng)用。組件間通信父子組件間通信這種情況下很簡(jiǎn)單，就是通過(guò)props屬性傳遞，在父組件設(shè)置子組件的屬性，所以子組件就可以通過(guò)props或者事件綁定訪問(wèn)到父組件的方法，這樣就搭建起了父子組件間通信的橋梁。MixinsMixins雖然組件的原則就是模塊化，彼此之間相互獨(dú)立，但是有時(shí)候不同的組件之間可能會(huì)共用一些功能，共享一部分代碼。所以React提供了mixins這種方式來(lái)處理這種問(wèn)題。Mixin就是用來(lái)定義一些方法，使用這個(gè)mixin的組件能夠自由的使用這些方法（就像在組件中定義的一樣），所以mixin相當(dāng)于組件的一個(gè)擴(kuò)展，在mixin中也能定義“生命周期”方法。表單狀態(tài)屬性表單元素有這么幾種屬于狀態(tài)的屬性value，對(duì)應(yīng)<input>和<textarea>所有checked，對(duì)應(yīng)類型為checkbox和radio的<input>所有selected，對(duì)應(yīng)<option>所有受控組件對(duì)于設(shè)置了上面提到的對(duì)應(yīng)“狀態(tài)屬性“值的表單元素就是受控表單組件，比如：非受控組件和受控組件相對(duì)，如果表單元素沒(méi)有設(shè)置自己的“狀態(tài)屬性”，或者屬性值設(shè)置為null，這時(shí)候就是非受控組件。打包發(fā)布使用webpack–p進(jìn)行打包資源React官網(wǎng)https://facebook.github.io/react/index.htmlReact中文社區(qū)：/React中文文檔中文文檔地址GitHub地址/reactjs-cn/react-docs阮一峰的"React入門實(shí)例教程"/blog/2015/03/react.html極客學(xué)院整理的文檔/project/react/React入門教程http://hulufei.gitbooks.io/react-tutorial/

React