一、引入React

<script src="../build/react.js"></script>

<script src="../build/react-dom.js"></script>

<script src="../build/browser.min.js"></script>

二、text/babel

由于React的JSX語法與原生的javascript語法不兼容，所以需要設(shè)置script標(biāo)簽的type屬性為'text/babel'

三、ReactDOM.render

ReactDOM.render函數(shù)是React的核心函數(shù)，用來元素轉(zhuǎn)化為DOM渲染到頁面中，第一個(gè)參數(shù)為組件元素，當(dāng)需要渲染多個(gè)組件時(shí)需要使用一個(gè)容器包裹住，第二個(gè)參數(shù)為真實(shí)DOM節(jié)點(diǎn)

四、JSX

JSX是一種可以混用JS和html的新語法，在解析時(shí)遇到<時(shí)解析為html，遇到{則解析為javascript

五、組件

組件是React最為重要的概念，是一種頁面組織方式

React.createClass用來創(chuàng)建一個(gè)組件

render?方法用來定義組件該如何被渲染

this.props?用來引用組件上的屬性，組件的屬性在使用組件時(shí)指定，類似于html標(biāo)簽的屬性

this.props.children?用來引用組件的子節(jié)點(diǎn)，可以使用React.Childern提供的幫助方法處理其數(shù)據(jù)結(jié)構(gòu)不一致的問題（當(dāng)子節(jié)點(diǎn)只有一個(gè)是this.props.children是一個(gè)object，沒有時(shí)為null，當(dāng)存在多個(gè)子節(jié)點(diǎn)時(shí)又是一個(gè)數(shù)組）,方法如下：

React.Children.map()

React.Children.forEach()

React.Children.count()

React.Children.only()

React.Children.toAttay()

propTypes?用來定義屬性的類型，主要是用來保證組件在重用時(shí)被正確的使用，主要類型如下：

React.PropTypes.array

React.PropTypes.bool

React.PropTypes.func

React.PropTypes.number

React.PropTypes.object

React.PropTypes.string

this.refs?用來引用組件虛擬DOM對應(yīng)的真實(shí)DOM元素，在render函數(shù)中定義的元素中可以指定一個(gè)ref屬性，就可以在組件的其它地方通過this.refs.some_ele來引用其對應(yīng)的真實(shí)DOM節(jié)點(diǎn)了，不過要注意的是必須在真實(shí)的DOM節(jié)點(diǎn)插入之后才可以訪問

六、組件的狀態(tài)

組件是狀態(tài)驅(qū)動的，狀態(tài)是組件渲染的依據(jù)，React與Jquery在開發(fā)方式上很大的區(qū)別就在于React是通過設(shè)置組件的狀態(tài)去影響真實(shí)的DOM節(jié)點(diǎn)，而不是直接操作DOM

this.state?用來引用組件的狀態(tài)

this.setState()?方法用來設(shè)置組件的狀態(tài)

七、為組件元素設(shè)置樣式

設(shè)置元素的className屬性

內(nèi)聯(lián)樣式，如下：

...<div style={{opacity: this.state.opacity}}></div>

八、組件的生命周期及鉤子函數(shù)

Mounting

getInitialState()?獲取組件的初始化狀態(tài)

componentWillMount()?組件插入DOM前觸發(fā)

componentDidMount()?組件插入DOM后觸發(fā)

Updating

componentWillReceiveProps(object nextProps)?組件獲取到新屬性時(shí)調(diào)用，一般用來轉(zhuǎn)換狀態(tài)

shouldComponentUpdate(object nextProps, object nextState): boolean?判斷組件是否需要更新時(shí)調(diào)用，可以通過判斷屬性和狀態(tài)來決定是否需要更新，返回false將跳過更新

componentWillUpdate(object nextProps, object nextState)?組件更新前調(diào)用

componentDidUpdate(object prevProps, object prevState)?組件更新后調(diào)用

Unmounting

componentWillUnmount()?組件移除DOM前調(diào)用