react入門筆記1

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的對比

組件化方面

1. 什麼是模塊化：是從代碼的角度來進行分析的；把一些可複用的代碼，抽離爲單個的模塊；便於項目的維護和開發；

2. 什麼是組件化： 是從 UI 界面的角度 來進行分析的；把一些可複用的UI元素，抽離爲單獨的組件；便於項目的維護和開發；

3. **組件化的好處：**隨着項目規模的增大，手裏的組件越來越多；很方便就能把現有的組件，拼接爲一個完整的頁面；

4. Vue是如何實現組件化的： 通過 .vue 文件，來創建對應的組件；

   • template 結構
   • script 行爲
   • style 樣式

5. 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

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

1. 運行npm init -y 快速初始化項目，會生成一個package.json的文件

2. 在項目根目錄創建src源代碼目錄和dist產品目錄

3. 在 src 目錄下創建 index.html

4. 使用 cnpm 安裝 webpack，cnpm i webpack -D ，然後運行cnpm i webpack-cli -D安裝webpack腳手架工具

   ！如何安裝 cnpm: 全局運行 npm i cnpm -g

5. 注意：webpack 4.x 提供了 約定大於配置的概念；目的是爲了儘量減少 配置文件的體積；

   • 默認約定了：
   • 打包的入口是src -> index.js
   • 打包的輸出文件是dist -> main.js
   • 4.x 中 新增了 mode 選項(爲必選項)，可選的值爲：development 和 production;

6. 安裝cnpm i webpack-dev-server -D 配置package.json文件，在內存中自動生成 打包後的main.js

7. 安裝cnpm i html-webpack-plugin -D 配置webpack.config.js文件，在內存中自動生成 index 首面的插件，並自動把打包好的js注入到頁面中，不需要手動引入

8. 終端輸入npm run dev
   
   webpack.config.js

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin') // 導入 在內存中自動生成 index 頁面的插件

// 創建一個插件的實例對象
const htmlPlugin = new HtmlWebPackPlugin({
  template: path.join(__dirname, './src/index.html'), // 源文件
  filename: 'index.html' // 生成的內存中首頁的名稱
})


// 向外暴露一個打包的配置對象；   因爲 webpack 是基於Node構建的；所以 webpack 支持所有Node API 和語法
module.exports = {
  mode: 'development', // development   production
  // 在 webpack 4.x 中，有一個很大的特性，就是 約定大於配置  約定，默認的打包入口路徑是 src -> index.js
  plugins: [
    htmlPlugin
  ]
}

package.json

{
  "name": "01.webpack-base",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    //--open 自動打開瀏覽器
    //--port 端口設置爲3000
    //--host 127.0.0.1 設置域名
    "dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^3.0.6",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
    "webpack-dev-server": "^3.1.1"
  }
}

待續…