React.js - 第1天

阿新 • • 發佈：2018-09-14

出現啟用選項 sop 必須樣式表下載 lar 替代

React.js - 第1天

1. React簡介

React 起源於 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram（照片交友）的網站。做出來以後，發現這套東西很好用，就在2013年5月開源了。
Angular1 2009 年谷歌 MVC 不支持組件化開發
由於 React 的設計思想極其獨特，屬於革命性創新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關註和使用，認為它可能是將來 Web 開發的主流工具。
清楚兩個概念：
- library（庫）：小而巧的庫，只提供了特定的API；優點就是船小好掉頭，可以很方便的從一個庫切換到另外的庫；但是代碼幾乎不會改變；
- Framework（框架）：大而全的是框架；框架提供了一整套的解決方案；所以，如果在項目中間，想切換到另外的框架，是比較困難的；

2. 前端三大主流框架

三大框架一大抄

Angular.js：出來較早的前端框架，學習曲線比較陡，NG1學起來比較麻煩，NG2 ~ NG5開始，進行了一系列的改革，也提供了組件化開發的概念；從NG2開始，也支持使用TS（TypeScript）進行編程；
Vue.js：最火（關註的人比較多）的一門前端框架，它是中國人開發的，對我我們來說，文檔要友好一些；
React.js：最流行（用的人比較多）的一門框架，因為它的設計很優秀；

3. React與vue的對比

組件化方面

什麽是模塊化：是從代碼的角度來進行分析的；把一些可復用的代碼，抽離為單個的模塊；便於項目的維護和開發；
什麽是組件化： 是從 UI 界面的角度來進行分析的；把一些可服用的UI元素，抽離為單獨的組件；便於項目的維護和開發；
組件化的好處：隨著項目規模的增大，手裏的組件越來越多；很方便就能把現有的組件，拼接為一個完整的頁面；
Vue是如何實現組件化的： 通過 .vue 文件，來創建對應的組件；
- template 結構
- script 行為
- style 樣式
React如何實現組件化：大家註意，React中有組件化的概念，但是，並沒有像vue這樣的組件模板文件；React中，一切都是以JS來表現的；因此要學習React，JS要合格；ES6 和 ES7 （async 和 await）要會用；

開發團隊方面

React是由FaceBook前端官方團隊進行維護和更新的；因此，React的維護開發團隊，技術實力比較雄厚；
Vue：第一版，主要是有作者尤雨溪專門進行維護的，當 Vue更新到 2.x 版本後，也有了一個以尤雨溪為主導的開源小團隊，進行相關的開發和維護；

社區方面

在社區方面，React由於誕生的較早，所以社區比較強大，一些常見的問題、坑、最優解決方案，文檔、博客在社區中都是可以很方便就能找到的；
Vue是近兩年才火起來的，所以，它的社區相對於React來說，要小一些，可能有的一些坑，沒人踩過；

移動APP開發體驗方面

Vue，結合 Weex 這門技術，提供了遷移到移動端App開發的體驗（Weex，目前只是一個小的玩具，並沒有很成功的大案例；）
React，結合 ReactNative，也提供了無縫遷移到移動App的開發體驗（RN用的最多，也是最火最流行的）；

4. 為什麽要學習React

和Angular1相比，React設計很優秀，一切基於JS並且實現了組件化開發的思想；
開發團隊實力強悍，不必擔心斷更的情況；
社區強大，很多問題都能找到對應的解決方案；
提供了無縫轉到 ReactNative 上的開發體驗，讓我們技術能力得到了拓展；增強了我們的核心競爭力；
很多企業中，前端項目的技術選型采用的是React.js；

5. React中幾個核心的概念

虛擬DOM（Virtual Document Object Model）

DOM的本質是什麽：瀏覽器中的概念，用JS對象來表示頁面上的元素，並提供了操作 DOM 對象的API；
什麽是React中的虛擬DOM：是框架中的概念，是程序員用JS對象來模擬頁面上的 DOM 和 DOM嵌套；
為什麽要實現虛擬DOM（虛擬DOM的目的）：為了實現頁面中， DOM 元素的高效更新
DOM和虛擬DOM的區別：
- DOM：瀏覽器中，提供的概念；用JS對象，表示頁面上的元素，並提供了操作元素的API；
- 虛擬DOM：是框架中的概念；而是開發框架的程序員，手動用JS對象來模擬DOM元素和嵌套關系；
  - 本質：用JS對象，來模擬DOM元素和嵌套關系；
  - 目的：就是為了實現頁面元素的高效更新；

Diff算法

tree diff:新舊兩棵DOM樹，逐層對比的過程，就是 Tree Diff；當整顆DOM逐層對比完畢，則所有需要被按需更新的元素，必然能夠找到；
component diff：在進行Tree Diff的時候，每一層中，組件級別的對比，叫做 Component Diff；
- 如果對比前後，組件的類型相同，則暫時認為此組件不需要被更新；
- 如果對比前後，組件類型不同，則需要移除舊組件，創建新組件，並追加到頁面上；
element diff:在進行組件對比的時候，如果兩個組件類型相同，則需要進行元素級別的對比，這叫做 Element Diff；

6. 創建基本的webpack4.x項目

運行npm init -y 快速初始化項目
在項目根目錄創建src源代碼目錄和dist產品目錄
在 src 目錄下創建 index.html
使用 cnpm 安裝 webpack ，運行cnpm i webpack webpack-cli -D
- 如何安裝 cnpm: 全局運行 npm i cnpm -g
註意：webpack 4.x 提供了約定大於配置的概念；目的是為了盡量減少配置文件的體積；
- 默認約定了：
- 打包的入口是src -> index.js
- 打包的輸出文件是dist -> main.js
- 4.x 中新增了 mode 選項(為必選項)，可選的值為：development 和 production;

7. 在項目中使用 react

運行 cnpm i react react-dom -S 安裝包
- react：專門用於創建組件和虛擬DOM的，同時組件的生命周期都在這個包中
- react-dom：專門進行DOM操作的，最主要的應用場景，就是ReactDOM.render()

在index.html頁面中，創建容器：

<!-- 容器，將來，使用 React 創建的虛擬DOM元素，都會被渲染到這個指定的容器中 -->
<div id="app"></div>

導入包：

import React from ‘react‘
import ReactDOM from ‘react-dom‘

創建虛擬DOM元素：

// 這是 創建虛擬DOM元素的 API    <h1 title="啊，五環" id="myh1">你比四環多一環</h1>
//  第一個參數： 字符串類型的參數，表示要創建的標簽的名稱
//  第二個參數：對象類型的參數， 表示 創建的元素的屬性節點
//  第三個參數： 子節點
const myh1 = React.createElement(‘h1‘, { title: ‘啊，五環‘, id: ‘myh1‘ }, ‘你比四環多一環‘)

渲染：

// 3. 渲染虛擬DOM元素
// 參數1： 表示要渲染的虛擬DOM對象
// 參數2： 指定容器,註意：這裏不能直接放 容器元素的Id字符串，需要放一個容器的DOM對象
ReactDOM.render(myh1, document.getElementById(‘app‘))

8. JSX語法

什麽是JSX語法：就是符合 xml 規範的 JS 語法；（語法格式相對來說，要比HTML嚴謹很多）

如何啟用 jsx 語法？
- 安裝 babel 插件
  - 運行cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
  - 運行cnpm i babel-preset-env babel-preset-stage-0 -D
- 安裝能夠識別轉換jsx語法的包 babel-preset-react
  - 運行cnpm i babel-preset-react -D
- 添加 .babelrc 配置文件
```
{
  "presets": ["env", "stage-0", "react"],
  "plugins": ["transform-runtime"]
}
```
- 添加babel-loader配置項：
```
module: { //要打包的第三方模塊
    rules: [
      { test: /\.js|jsx$/, use: ‘babel-loader‘, exclude: /node_modules/ }
    ]
}
```
  ?
jsx 語法的本質：並不是直接把 jsx 渲染到頁面上，而是內部先轉換成了 createElement 形式，再渲染的；
在 jsx 中混合寫入 js 表達式：在 jsx 語法中，要把 JS代碼寫到 { } 中
- 渲染數字
- 渲染字符串
- 渲染布爾值
- 為屬性綁定值
- 渲染jsx元素
- 渲染jsx元素數組
- 將普通字符串數組，轉為jsx數組並渲染到頁面上【兩種方案】
在 jsx 中寫註釋：推薦使用{ /* 這是註釋 */ }
為 jsx 中的元素添加class類名：需要使用className 來替代 class；htmlFor替換label的for屬性
在JSX創建DOM的時候，所有的節點，必須有唯一的根元素進行包裹；
在 jsx 語法中，標簽必須成對出現，如果是單標簽，則必須自閉和！

當編譯引擎，在編譯JSX代碼的時候，如果遇到了<那麽就把它當作 HTML代碼去編譯，如果遇到了 {} 就把花括號內部的代碼當作普通JS代碼去編譯；

9. React中創建組件

第1種 - 創建組件的方式

使用構造函數來創建組件，如果要接收外界傳遞的數據，需要在構造函數的參數列表中使用props來接收；

必須要向外return一個合法的JSX創建的虛擬DOM；

創建組件：

function Hello () { 
  // return null 
  return <div>Hello 組件</div>
}

為組件傳遞數據：

// 使用組件並 為組件傳遞 props 數據
<Hello name={dog.name} age={dog.age} gender={dog.gender}></Hello>

// 在構造函數中，使用 props 形參，接收外界 傳遞過來的數據
function Hello(props) {
  // props.name = ‘zs‘
  console.log(props)
  // 結論：不論是 Vue 還是 React，組件中的 props 永遠都是只讀的；不能被重新賦值；

  return <div>這是 Hello 組件 --- {props.name} --- {props.age} --- {props.gender}</div>
}

父組件向子組件傳遞數據
使用{...obj}屬性擴散傳遞數據
將組件封裝到單獨的文件中
註意：組件的名稱首字母必須是大寫

在導入組件的時候，如何省略組件的.jsx後綴名：

// 打開 webpack.config.js ，並在導出的配置對象中，新增 如下節點：
resolve: {
    extensions: [‘.js‘, ‘.jsx‘, ‘.json‘], // 表示，這幾個文件的後綴名，可以省略不寫
    alias: {
        ‘@‘: path.join(__dirname, ‘./src‘)
    }
  }

在導入組件的時候，配置和使用@路徑符號

第2種 - 創建組件的方式

使用 class 關鍵字來創建組件

ES6 中 class 關鍵字，是實現面向對象編程的新形式；

了解ES6中 class 關鍵字的使用

class 中 constructor 的基本使用
實例屬性和實例方法
靜態屬性和靜態方法
使用 extends 關鍵字實現繼承

基於class關鍵字創建組件

最基本的組件結構：

class 組件名稱 extends React.Component {
    render(){
        return <div>這是 class 創建的組件</div>
    }
}

10. 兩種創建組件方式的對比

用構造函數創建出來的組件：叫做“無狀態組件”
用class關鍵字創建出來的組件：叫做“有狀態組件”

有狀態組件和無狀態組件之間的本質區別就是：有無state屬性！

11. 一個小案例，鞏固有狀態組件和無狀態組件的使用

通過for循環生成多個組件

數據：

CommentList: [
    { id: 1, user: ‘張三‘, content: ‘哈哈，沙發‘ },
    { id: 2, user: ‘李四‘, content: ‘哈哈，板凳‘ },
    { id: 3, user: ‘王五‘, content: ‘哈哈，涼席‘ },
    { id: 4, user: ‘趙六‘, content: ‘哈哈，磚頭‘ },
    { id: 5, user: ‘田七‘, content: ‘哈哈，樓下山炮‘ }
]

設置樣式

使用普通的 style 樣式
啟用 css-modules
使用localIdentName設置生成的類名稱，可選的參數有：
- [path] 表示樣式表所在路徑
- [name] 表示樣式表文件名
- [local] 表示樣式的定義名稱
- [hash:length] 表示32位的hash值
使用 :local() 和 :global()

安裝 React Developer Tools 調試工具

React Developer Tools - Chrome 擴展下載安裝地址

總結

理解React中虛擬DOM的概念
理解React中三種Diff算法的概念
使用JS中createElement的方式創建虛擬DOM
使用ReactDOM.render方法
使用JSX語法並理解其本質
掌握創建組件的兩種方式
理解有狀態組件和無狀態組件的本質區別
理解props和state的區別

2018 年，React 將獨占前端框架鰲頭？
前端框架三巨頭年度走勢對比：Vue 增長率最高
React數據流和組件間的溝通總結
單向數據流和雙向綁定各有什麽優缺點？
怎麽更好的理解虛擬DOM?
React中文文檔 - 版本較低
React 源碼剖析系列－不可思議的 react diff
深入淺出React（四）：虛擬DOM Diff算法解析
一看就懂的ReactJs入門教程（精華版）
CSS Modules 用法教程
將MarkDown轉換為HTML頁面
win7命令行端口占用查詢進程號殺進程

React.js - 第1天

出現啟用選項 sop 必須樣式表下載 lar 替代 React.js - 第1天 1. React簡介 React 起源於 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instag

React.js - 第1天

React.js - 第1天

1. React簡介

2. 前端三大主流框架

3. React與vue的對比

組件化方面

開發團隊方面

社區方面

移動APP開發體驗方面

4. 為什麽要學習React

5. React中幾個核心的概念

虛擬DOM（Virtual Document Object Model）

Diff算法

6. 創建基本的webpack4.x項目

7. 在項目中使用 react

8. JSX語法

9. React中創建組件

第1種 - 創建組件的方式

第2種 - 創建組件的方式

了解ES6中 class 關鍵字的使用

基於class關鍵字創建組件

10. 兩種創建組件方式的對比

11. 一個小案例，鞏固有狀態組件和無狀態組件的使用

通過for循環生成多個組件

設置樣式

安裝 React Developer Tools 調試工具

總結

相關文章

相關推薦