一、React的基本認(rèn)識(shí) 

1、介紹

react是用于構(gòu)建用戶界面的JavaScript庫(kù)(只關(guān)注view)由Facebook開源

2、 React的特點(diǎn)

• Declarative(聲明式編碼)
• Component-Based(組件化編碼)
• Learn Once, Write Anywhere(支持客戶端與服務(wù)器渲染)
• 高效
• 單向數(shù)據(jù)流

3、React高效的原因

• 虛擬(virtual)DOM, 不總是直接操作DOM
• DOM Diff算法, 最小化頁(yè)面重繪

二、React的基本使用

1、相關(guān)js庫(kù)

• `react.js`: React的核心庫(kù)
• `react-dom.js`: 提供操作DOM的react擴(kuò)展庫(kù)
• `babel.min.js`: 解析JSX語(yǔ)法代碼轉(zhuǎn)為純JS語(yǔ)法代碼的庫(kù)

2、在頁(yè)面中導(dǎo)入js庫(kù)

<script  src="../js/react.development.js"></script>
<script  src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>

3、編碼

<script type="text/babel"> //必須聲明babel
  // 1、創(chuàng)建虛擬DOM元素
  const vDom = <h1>Hello React</h1> // 千萬(wàn)不要加引號(hào)
  // 2、渲染虛擬DOM到頁(yè)面真實(shí)DOM容器中
  ReactDOM.render(vDom, document.getElementById('test'))
</script>

三、React JSX

1、虛擬DOM

React提供了一些API來(lái)創(chuàng)建一種特別的一般js對(duì)象

var element = React.createElement('h1', {id:'myTitle'},'hello')

上面創(chuàng)建的就是一個(gè)簡(jiǎn)單的虛擬DOM對(duì)象

虛擬DOM對(duì)象最終都會(huì)被React轉(zhuǎn)換為真實(shí)的DOM

​ 我們編碼時(shí)基本只需要操作react的虛擬DOM相關(guān)數(shù)據(jù), react會(huì)轉(zhuǎn)換為真實(shí)DOM變化而更新界面

2、JSX

• 全稱: `JavaScript XML`
• react定義的一種類似于XML的JS擴(kuò)展語(yǔ)法:`XML+JS`
• 作用: 用來(lái)創(chuàng)建react虛擬DOM(元素)對(duì)象

var ele = <h1>Hello JSX!</h1>

注意1: 它不是字符串, 也不是HTML/XML標(biāo)簽

注意2: 它最終產(chǎn)生的就是一個(gè)JS對(duì)象

• 標(biāo)簽名任意: HTML標(biāo)簽或其它標(biāo)簽
• 標(biāo)簽屬性任意: HTML標(biāo)簽屬性或其它
• 基本語(yǔ)法規(guī)則

遇到 <開頭的代碼, 以標(biāo)簽的語(yǔ)法解析: html同名標(biāo)簽轉(zhuǎn)換為html同名元素, 其它標(biāo)簽需要特別解析

遇到以 { 開頭的代碼，以JS語(yǔ)法解析: 標(biāo)簽中的js代碼必須用{ }包含

• `babel.js`的作用

瀏覽器不能直接解析JSX代碼, 需要babel轉(zhuǎn)譯為純JS的代碼才能運(yùn)行

只要用了JSX，都要加上type=“text/babel”, 聲明需要babel來(lái)處理

3、渲染虛擬DOM元素

語(yǔ)法:

ReactDOM.render(virtualDOM, containerDOM)

• 參數(shù)一: 純js或jsx創(chuàng)建的虛擬dom對(duì)象
• 參數(shù)二: 用來(lái)包含虛擬DOM元素的真實(shí)dom元素對(duì)象(一般是一個(gè)div)

作用:
將虛擬DOM元素渲染到頁(yè)面中的真實(shí)容器DOM中顯示

4、創(chuàng)建虛擬DOM的方式

純JS方式

React.createElement('h1',{id:'myTitle'}, title

JSX方式

<h1 id='myTitle'>{title}</h1>

代碼示例

<div id="app"></div>
const test1 = 'MY TEST 1'
// 1、創(chuàng)建虛擬dom：兩種方法
var element = React.createElement('h3',{id:app},test1)
var element2 = <h3 id={test1}>{test1}</h3>
// 2、渲染虛擬dom
ReactDOM.render(element,document.getElementById('app'))
ReactDOM.render(element2,document.getElementById('app'))

5、React 之 Hello World

第一步：引入react.js相關(guān)庫(kù)

<script  src="../js/react.development.js"></script>
<script  src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>

第二步：定義根元素

<div id="app"></div>

第三步：在babel環(huán)境下寫React代碼

<script type="text/babel">
// 1、創(chuàng)建虛擬dom元素對(duì)象
var vDOM = <h1>Hello W</h1>  //不是字符串
// 2、將虛擬dom渲染為頁(yè)面真實(shí)dom容器中
ReactDOM.render(vDOM,document.getElementById('app'))
</script>

到此這篇關(guān)于react入門級(jí)詳細(xì)筆記的文章就介紹到這了,該篇文章講述了React的基本概念和基本的使用以及一些React常用相關(guān)js庫(kù),希望可以對(duì)你有所幫助

最新評(píng)論