react入門(mén)級詳細筆記

目錄

一、React的基本認識 

1、介紹

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

2、 React的特點(diǎn)

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

3、React高效的原因

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

二、React的基本使用

1、相關(guān)js庫

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

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

三、React JSX

1、虛擬DOM

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

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

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

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

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

2、JSX

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

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

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

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

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

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

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

• `babel.js`的作用

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

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

3、渲染虛擬DOM元素

語(yǔ)法:

ReactDOM.render(virtualDOM, containerDOM)

• 參數一: 純js或jsx創(chuàng )建的虛擬dom對象
• 參數二: 用來(lái)包含虛擬DOM元素的真實(shí)dom元素對象(一般是一個(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)庫

<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)境下寫(xiě)React代碼

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

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