為什么script的type是text/jsx,這是因為 React 獨有的 JSX 語法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/jsx" 。 其次,React 提供兩個庫: react.js 和 JSXTransformer.js ,它們必須首先加載。其中,JSXTransformer.js 的作用是將 JSX 語法轉(zhuǎn)為 JavaScript 語法。這一步很消耗時間,實際上線的時候,應(yīng)該將它放到服務(wù)器完成。
React.render 是 React 的最基本方法,用于將模板轉(zhuǎn)為 HTML 語言,并插入指定的 DOM 節(jié)點。
注意,react并不依賴jQuery,當(dāng)然可以使用jQuery,但是render里面第二個參數(shù)必須使用JavaScript原生的getElementByID方法,不能使用jQuery來選取DOM節(jié)點。
Jsx語法
HTML 語言直接寫在 JavaScript 語言之中,不加任何引號,這就是 JSX 的語法,它允許 HTML 與 JavaScript 的混寫。
JSX 允許直接在模板插入 JavaScript 變量。如果這個變量是一個數(shù)組,則會展開這個數(shù)組的所有成員。
ReactJS組件
組件屬性
ReactJS是基于組件化的開發(fā),React 允許將代碼封裝成組件,然后像插入普通 HTML 標(biāo)簽一樣,在網(wǎng)頁中插入這個組件。React.createClass 方法就用于生成一個組件類。
注意:
獲取屬性的值用的是this.props.屬性名
創(chuàng)建的組件名稱首字母必須大寫。
為元素添加css的class時,要用className。
組件的style屬性的設(shè)置方式也值得注意,要寫成style={{width: this.state.witdh}}。
組件狀態(tài)
組件免不了要與用戶互動,React 的一大創(chuàng)新,就是將組件看成是一個狀態(tài)機,一開始有一個初始狀態(tài),然后用戶互動,導(dǎo)致狀態(tài)變化,從而觸發(fā)重新渲染 UI 。
組件的生命周期
組件的生命周期分成三個狀態(tài):
- Mounting:已插入真實 DOM
- Updating:正在被重新渲染
- Unmounting:已移出真實 DOM
React 為每個狀態(tài)都提供了兩種處理函數(shù),will 函數(shù)在進入狀態(tài)之前調(diào)用,did 函數(shù)在進入狀態(tài)之后調(diào)用,三種狀態(tài)共計五種處理函數(shù)。
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
此外,React 還提供兩種特殊狀態(tài)的處理函數(shù)。
componentWillReceiveProps(object nextProps):已加載組件收到新的參數(shù)時調(diào)用
shouldComponentUpdate(object nextProps, object nextState):組件判斷是否重新渲染時調(diào)用