一、React的基本認識 

1、介紹

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

2、 React的特點

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

3、React高效的原因

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

二、React的基本使用

1、相關(guān)js庫

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

2、在頁面中導入js庫

<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> // 千萬不要加引號
  // 2、渲染虛擬DOM到頁面真實DOM容器中
  ReactDOM.render(vDom, document.getElementById('test'))
</script>

三、React JSX

1、虛擬DOM

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

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

上面創(chuàng)建的就是一個簡單的虛擬DOM對象

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

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

2、JSX

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

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

注意1: 它不是字符串, 也不是HTML/XML標簽

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

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

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

遇到以 { 開頭的代碼，以JS語法解析: 標簽中的js代碼必須用{ }包含

• `babel.js`的作用

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

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

3、渲染虛擬DOM元素

語法:

ReactDOM.render(virtualDOM, containerDOM)

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

作用:
將虛擬DOM元素渲染到頁面中的真實容器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)庫

<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元素對象
var vDOM = <h1>Hello W</h1>  //不是字符串
// 2、將虛擬dom渲染為頁面真實dom容器中
ReactDOM.render(vDOM,document.getElementById('app'))
</script>

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

最新評論