步入ReactJS

為什么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)用

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南,這只是我在學(xué)習(xí)過程中的一些閱讀筆記,個人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,953評論 1 18
  • react 基本概念解析 react 的組件聲明周期 react 高階組件,context, redux 等高級...
    南航閱讀 1,142評論 0 1
  • It's a common pattern in React to wrap a component in an ...
    jplyue閱讀 3,409評論 0 2
  • React 入門實例教程 轉(zhuǎn)載(加入了自己的一些東西,推薦看原文):一看就懂的ReactJs入門教程(精華版) ...
    驀然之間的閱讀 445評論 0 0
  • 拂景選自《正面管教——如何不懲罰、不驕縱地有效管教孩子》P9 R 閱讀原書拆頁 盡管在第一次使用正面管教方法時,孩...
    拂景閱讀 342評論 1 3

友情鏈接更多精彩內(nèi)容