React 簡介及其基本使用

相關概念：

插件： 別人寫好的第三方庫

xxx 插件： jQuery 插件  /  react 插件

全家桶： 核心庫 + 相關插件

構建項目： 對項目源碼 進行 編譯、合併、壓縮......處理，生成能讓瀏覽器高效運行的打包文件

構建用戶界面： 顯示帶數據的界面（將數據以頁面的形式展示出來）

jQuery 庫： 直接操做 DOM，只是簡化封裝成了函數，是一個函數庫。

React 庫： 間接操做 DOM，經過修改狀態數據刷新界面，組件化的編程思想

模塊化編程： 一個 js 就是一個模塊，項目代碼由多個模塊構成。

界面： html、css 實現的

功能： js 實現的

React Native 能夠用開發原生應用 APP 

一個 圖片 的顯示： 由內存的數據被瀏覽器解析 DOM 元素對象 渲染到頁面

輕量級對象： 屬性少 ---- 虛擬 DOM 元素對象

重量級對象： 屬性多 ---- 原生 DOM 元素對象

React

用於動態構建 用戶界面 的 javascript 庫，由 Facebook 開源

特色：

聲明式： 無需直接操做 DOM，只需更新頁面數據對應的狀態數據，便可更新頁面

組件化編程： 每一個界面功能完成的部分(html、css等全部資源)稱之爲 "組件"

做用： 簡化、複用

組件使用：

一次學習，隨處使用： 能夠一套代碼實現跨平臺應用 (支持客戶端與瀏覽器渲染)

高效： 只需操做虛擬 DOM，框架會映射到原生 DOM，採用了 DOM Diff 算法，最小化頁面重繪

單數據流

基本使用：

1. 使用 CDN 引入 React 16.7

<script src="https://cdn.bootcss.com/react/16.7.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.7.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>

注意:  在瀏覽器中使用 Babel 來編譯 JSX 效率是很是低的____頁面運行過程當中編譯

產品版，應該是使用構建工具，提早將源碼編譯成正常的源碼

2. 引入插件

操做 DOM 的插件

Babel 將 ES6 轉 ES5，將 jsx 轉換成 js

3. 寫代碼（瀏覽器解析以前，babel 會將 jsx 代碼轉換成 js 代碼）

// 使用 jsx 語法 建立虛擬 DOM

<script type="text/babel">    // 聲明使用 babel 解析 jsx 爲 js

const vDOM = <h2 id={myId} name={myName}>{content}</h2>;

// 而後渲染 

ReactDOM.render(vDOM, document.getElementById("test"));

// 建立虛擬 DOM 的 非 jsx 語法 步驟

const vDOM  = React.createElement('h2', {id:"myWords", name: "kjf"}, "Hello React.");

// 而後渲染

ReactDOM.render(vDOM, document.getElementById("test"));

// 插入頁面前： 根據虛擬 DOM 生成原生 DOM

// 將內存的虛擬 DOM元素渲染到頁面的原生 DOM 容器中

jsx

<h2 id={myId} name={myName}>{content}</h2>;

全稱：JavaScript XML

react 定義的一種相似於 XML 的 js 擴展語法 XML + js

標籤、屬性、文檔 與 html 的相對應

做用： 建立 react 虛擬 DOM 元素對象

注意：

不是字符串，而是最終產生一個對象。虛擬 DOM 元素對象

debugger

動態展現列表數據

js

• /**** 虛擬 DOM 標籤數組
  const lis = [
      <li>Thor</li>,
      <li>Stark</li>,
      <li>Hock</li>,
  ]
  const ul = (
      <ul>
          {lis}
      </ul>
  );
  ****/
  
  const names= ["Thor", "Stark", "Hock"]
  
  // 建立虛擬 DOM
  const ul = (
      <ul>
          {
              names.map(
                  (each, index)=><li key={index}>{each}</li>
              )
          }
      </ul>
  )
  
  // 渲染 DOM
  ReactDOM.render(ul, document.getElementById("outer"))

代碼地址： kiss me.