React 和 Vue 的對比
1.什么是模塊化，是從代碼的角度來進(jìn)行分析的。把一些可復(fù)用的代碼，抽離為單個的模塊，便于項(xiàng)目的維護(hù)和開發(fā)。
2.什么是組件化，是從UI界面的角度來進(jìn)行分析的。把一些可復(fù)用的UI元素，抽離為單獨(dú)的組件，便于項(xiàng)目的維護(hù)和開發(fā)。
3.組件化的好處就是隨著項(xiàng)目的擴(kuò)大，能很方便的將現(xiàn)用的組件，拼接成一個完整的頁面，便于開發(fā)。
4.Vue如何實(shí)現(xiàn)組件化：通過.vue文件創(chuàng)建來創(chuàng)建對應(yīng)的組件
- template 結(jié)構(gòu)
- script 行為
- style 樣式
5.React如何實(shí)現(xiàn)組件化的：一切都是以JS來表現(xiàn)的。
虛擬DOM
1.DOM的本質(zhì)是什么：瀏覽器中的概念，用JS對象來表示頁面上的元素，并提供了操作DOM對象的API。
2.虛擬DOM：是框架中的概念，用JS對象來模擬頁面上的DOM和DOM嵌套。
3.為什么要實(shí)現(xiàn)虛擬DOM：為了實(shí)現(xiàn)頁面中DOM元素的高效更新。比較新舊虛擬DOM，進(jìn)行比較更新（按需更新），而不是全部重新渲染。例：數(shù)據(jù)渲染試圖，拿到數(shù)據(jù)拼接字符串，添加到文檔中，實(shí)現(xiàn)更新DOM，而如果只是ul其中的兩個li需要互換位置，那么只去更改這兩個元素的位置肯定更高效一點(diǎn)（比較虛擬DOM按需更新），而不是通過重新排序數(shù)據(jù)然后再拼接整個ul中l(wèi)i的字符串去渲染。
4.如何模擬虛擬DOM樹
<div id="myDiv" title="title">
Hello Wrold!
<p>你好世界</p>
</div>
// 虛擬DOM：用JS對象來模擬頁面上的DOM和DOM嵌套關(guān)系 為了實(shí)現(xiàn)高效更新
var div = {
tagName:'div',
attr:{
id:'myDiv',
title:'title', // 自定義屬性
},
childrens:[
'Hello Wrold!',
{
tagName:'p',
attr:{},
childrens:[
'你好世界',
]
}
]
}
// 需要更新的時候 對比虛擬DOM更新虛擬DOM即可
Diff算法
用來實(shí)現(xiàn)虛擬DOM的高效對比，是實(shí)現(xiàn)高效更新的基礎(chǔ)，虛擬DOM提供DOM樹，而diff算法則提供比較更新的最優(yōu)算法。
1.tree diff ： 新舊兩棵DOM樹，逐層對比的過程。當(dāng)對比完成，則所有需要按需更新的元素，必然能夠找到。
2.component diff ： 在逐層比較tree diff的時候，組件級別的對比。如果不同則移除舊組件，創(chuàng)建新組件然后添加頁面中。
3.element diff ：元素級別的對比。
創(chuàng)建項(xiàng)目
1.使用腳手架
npm install -g create-react-app // 安裝腳手架
create-react-app my-app // 生成項(xiàng)目目錄
cd my-app // 切換到項(xiàng)目目錄
npm start // 運(yùn)行項(xiàng)目
2.手動搭建
在webpack.config.js中
export.modules = {
mode:'development' // production
// 在運(yùn)行webpack命令 進(jìn)行打包的時候 會有壓縮和壓縮的分別
}
使用webpack-dev-server來實(shí)現(xiàn)修改后自動打包更新
// 1. 安裝
npm i webpack-dev-server -D
// 2. 配置
// package.json
script:{
"test":"xxx xxx",
"dev": "webapck-dev-server"
// "dev": "webapck-dev-server --open"
// 自動打開默認(rèn)瀏覽器
// "dev": "webapck-dev-server --open firefox"
// 自動打開火狐 IE則是 iexplore
// "dev": "webapck-dev-server --open --port 3000"
// 端口號定義為3000
// "dev": "webapck-dev-server --open --port 3000 --hot"
// 熱更新
// "dev": "webapck-dev-server --progress --compress"
// 打包進(jìn)度 & 壓縮
// "dev": "webapck-dev-server --host 127.0.0.1"
// 指定項(xiàng)目運(yùn)行的域名
}
// 使用
npm run dev
// 之后會跟蹤文件 文件更新后 會實(shí)時打包更新
// webpack-dev-server打包好的main.js是托管到了內(nèi)存中，所有在項(xiàng)目根目錄看不到 （不是dist中的那個main.js）
//所以在src目錄中的index.html中應(yīng)該這么引入js文件
<script src="/main.js"> </script>
// 而不是../dist/main.js
// 之后使用插件生成html的時候會自動插入 不用自己去引入
之后每次修改文件并保存之后就會自動更新打包生成一個看不見的在項(xiàng)目根目錄下的main.js ，為什么不保存在物理磁盤上而是保存在內(nèi)存上呢，因?yàn)楸４娴念l率很高，物理磁盤會開銷很大，就會很慢，出于性能考慮，所以是存在內(nèi)存上。
通過webpack-dev-server將main.js放在了內(nèi)存上，那么同樣有工具將index.html也放在內(nèi)存上，就是html-webapck-plugin插件，使用這個插件將頁面生成在內(nèi)存上去，并且會將dist中的main.js追加到頁面中去。
// 1. 安裝
npm i html-webpack-plugin -D
// 2. 更新webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 創(chuàng)建插件實(shí)例
const htmlPlugin = new HtmlWebpackPlugin({
template: path.join(__dirname,'./src/index.html'),// 源文件 __dirname 當(dāng)前這個js文件的目錄 即項(xiàng)目根目錄
filename:'index.html'// 生成的在內(nèi)存中的首頁名稱
})
module.exports= {
mode:'development',
// 在webpack 4.x中 無需指定入口 約定大于配置原則 入口就是./src/index.js
plugin:[
htmlPlugin,//掛載
]
}
在項(xiàng)目中使用 React
1.安裝主要依賴包
npm i react react-dom -S
react：專門用于創(chuàng)建組件和虛擬DOM的，同時組件的生命周期都在這個包中
react-dom：專行DOM操作的，最主要的應(yīng)用場景就是ReactDom.render()
2.在index.html中創(chuàng)建容器
<div id="app"></div>
3.在./src/index.js中導(dǎo)入包
import React from 'react'
import ReactDOM from 'react-dom'
4.創(chuàng)建虛擬DOM元素
const myh1 = React.createElement('h1',{
title:"hello world",
id:"test"
},'你好 世界')
// 參數(shù)：元素類型 元素屬性對象 子節(jié)點(diǎn)...
const myDiv = React.createElement('div',null,myh1)
5.渲染
ReactDOM.render(myDiv,document.getELementById('app'))
