react入門級詳細筆記

Posted on by

一、React的基本認識 

1、介紹

react是用於構建用戶界面的JavaScript庫(隻關註view)由Facebook開源

2、 React的特點

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

3、React高效的原因

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

二、React的基本使用

1、相關js庫

  • `react.js`: React的核心庫
  • `react-dom.js`: 提供操作DOM的react擴展庫
  • `babel.min.js`: 解析JSX語法代碼轉為純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、創建虛擬DOM元素
  const vDom = <h1>Hello React</h1> // 千萬不要加引號
  // 2、渲染虛擬DOM到頁面真實DOM容器中
  ReactDOM.render(vDom, document.getElementById('test'))
</script>

三、React JSX

1、虛擬DOM

React提供瞭一些API來創建一種特別的一般js對象

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

上面創建的就是一個簡單的虛擬DOM對象

虛擬DOM對象最終都會被React轉換為真實的DOM

​ 我們編碼時基本隻需要操作react的虛擬DOM相關數據, react會轉換為真實DOM變化而更新界面

2、JSX

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

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

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

註意2: 它最終產生的就是一個JS對象

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

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

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

  • `babel.js`的作用

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

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

3、渲染虛擬DOM元素

語法:

ReactDOM.render(virtualDOM, containerDOM)

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

作用:
將虛擬DOM元素渲染到頁面中的真實容器DOM中顯示

4、創建虛擬DOM的方式

純JS方式

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

JSX方式

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

代碼示例

<div id="app"></div>
const test1 = 'MY TEST 1'
// 1、創建虛擬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相關庫

<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環境下寫React代碼

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

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

推薦閱讀：