React.js - 入門

時間 2019-11-10

標籤 react.js react 入門欄目 React 简体版

原文原文鏈接

React.js - 第1天

1. React簡介

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

2. 前端三大主流框架

三大框架一大抄css

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）要會用；html

開發團隊方面

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元素和嵌套關係；vue
  - 本質：用JS對象，來模擬DOM元素和嵌套關係；
  - 目的：就是爲了實現頁面元素的高效更新；

Diff算法

tree diff:新舊兩棵DOM樹，逐層對比的過程，就是 Tree Diff；當整顆DOM逐層對比完畢，則全部須要被按需更新的元素，必然可以找到；node
component diff：在進行Tree Diff的時候，每一層中，組件級別的對比，叫作 Component Diff；react
- 若是對比先後，組件的類型相同，則暫時認爲此組件不須要被更新；
- 若是對比先後，組件類型不一樣，則須要移除舊組件，建立新組件，並追加到頁面上；
element diff:在進行組件對比的時候，若是兩個組件類型相同，則須要進行元素級別的對比，這叫作 Element Diff；webpack

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頁面中，建立容器：es6

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

導入包：web

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()