React 学习第一天-2018-07-21
React ?學習第一天
?
1.Dom 和虛擬Dom
Dom 是瀏覽器中實際存在的，虛擬Dom是框架中的，是利用JS代碼來模擬DOM。
虛擬Dom 是實現頁面的實時更新。
Dom樹，一個網頁的呈現過程，
1.瀏覽器請求，拿到代碼，
2.瀏覽器在內存中解析DOM結構，并且在內存中渲染出一顆內存樹
3.瀏覽器把DOM 樹，呈現到頁面上。
?
如何獲取到新舊DOM 樹，從而實現DOM樹的對比。
1.瀏覽器中沒有自帶的相關API，
2.程序員可以手動模擬新舊兩顆DOM樹，這樣就可以實現相關的對比，
用JS 對象模擬這個對象
<div id=”mydiv”?title=”說實話”> 杰哥好帥</div>
//DOM叔
var div = {
tagName : 'div',
attrs : {
id : 'mydiv',
title : '說實話',
'data-index' : ?'0'
},
childrens : ['杰哥很帥'],
{
tagName :'p',
attrs : {},
childrens :['這個是P標簽']
}
}
什么是虛擬DOM樹： ?利用JS的對象形式，來模擬頁面上DOM的嵌套關系，虛擬DOM是JS中的對象
程序員模擬的兩顆新舊DOM 樹，就是React 中DOM 樹的概念，
React 中的虛擬DOM概念: 1. 本質，使用JS對象，來模擬DOM元素和相關嵌套關系，2.目的，實現頁面元素的高效更新。
?
?
2.Diff 算法。different .對比前后相關的變化。before ?和 after
2.1tree diff ?新舊兩顆DOM 樹，逐層大體對比，
2.2 component diff ?每一層中的組件對比，
2.3 element diff ?每一層的元素對比
?
?
?
?
3.創建webpack 4.X項目
3.1 基本的相關流程
第一步：快速初始化一個項目，初始化命令：npm init ?-y ?初始化一個項目，
第二步：建立相關文件夾和目錄。src 源代碼目錄 ?和dist ?產品目錄（發布好的產品放這個里面）
第三步： 創建index.html
第四步：使用cnpm i webpack -D 安裝webpack ??4.2.0 注意版本。
第五步： 還要安裝 cnpm i webpack-cli ?-D ??2.0.13
3.2 VS初始化一個html 頁面。先輸入 ！,然后按下tab鍵。
?
3.3 cnpm i wbpack -S ???-S ?和 -D d ??
安裝 cnpm . ?npm i cnpm -g ??全局安裝一個cnpm
3.4 直接運行webpack 打包命令，失敗。原因是相關配置沒有配置好。需要建立一個webpack.config.js 文件，進行相關的配置。
3.5 還是失敗，因為是默認配置為index.js ?我寫的是main.js
3.6 webpack 4.X 提供了約定大于配置的概念。目的是為了減少這個配置文件的體積。約定了打包的入口文件是 ‘src/index.js ‘?，打包的輸出文件的 ?‘dist/main.js’.但是是可以修改的。
3.7 webpack 4.X ?中，新增了node 選項，主要是壓縮還是不壓縮，起到這工作。3.X中是沒有這個功能的。
【注】
ES 6 ?代碼可能暫時不能支持，但是需要配置babel 就能支持，建立一個bebelrc 文件就行。
?
4.運行一次就要重新打包一次，很麻煩，因此需要自動化打包，那么就安裝webpack-dev-server 包，進行相關配置，自動化打包。
4.1 ???cnpm ?i webpack-dev-server -D
4.2 ?進行配置。package.json ?中，在腳本中配置。
“dev”??: ?“webpack-dev-server ”
這里還可以配置其他的：
"dev"?: "webpack-dev-server --open --port 3000 --hot"
--open ?
--port
-- hot
-- host
--progress
--compress
--
?
4.3 ?main.js 已經托管到了內存當中，但是index.html ?首頁還沒有托管到內存中，需要進一步完善。需要安裝新的包。
4.3.1 ??cnpm i html-webpack-plugin -D
4.3.2 ?在webpack.config.js ?中進行配置。
第一步，導入 ?const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
第二步，進行導入包的配置，
?第一步，生成對象實例
?const htmlPlugin = new HtmlWebpackPlugin ({
template : ’path.join()’?, //源文件地址.其中。path.join()用于進行路徑拼接的，__dirname ?表示當前路徑的一個常數參數。
filename : ‘’???//目的路徑地址，
})
?
第二步，然后到 module 中進行配置，plugins : [ htmlPlugin ?]
?
?
5.React 學習。
5.1 安裝包 cnpm i react react-dom -S ???-S 代表從開發到上線都需要用到的東西，
react ?創建組件和虛擬DOM 的
react-dom 專門進行DOM 操作的，就是進行渲染，ReactDOM.render();
5.2 進行相關的配置。
//1.導入包名。
import?React?from?'react'?//創建組件，創建虛擬DOM，生命周期的相關，
import?ReactDOM?from?'react-dom'?//渲染到頁面展示相關，
?
//2. 創建虛擬的DOM 元素，
//第一個參數，創建元素的標簽類型，
//第二個參數是節點的屬性，
//第三個參數是標簽的子元素，或者內容
const?h1= React.createElement('h1',{id :?'h1',title :'h'},'這個想試圖創建一個H1');
//3.把虛擬DOM 渲染到頁面上。
//第一個參數，渲染誰，
//第二個參數，渲染的容器，
ReactDOM.render(h1?,document.getElementById('app'))
//第四步，頁面中放一個DOM 元素
?
在React ?中一切皆是用js ?對象來表現的，
?
?
6.DOM 元素之間的嵌套，
把相關的標簽元素當作子節點掛載在相關的標簽上。
?
7.js 中寫html 代碼，不能解析，那么則需要安裝babel 解析器。在js 中混合寫入類似于html 的語法，叫做JSX ?語法。符合XML 規范的JS 。
JSX ?的本質，還是在運行的時候轉換成了 createElement的形式，
第一步，配置beble 等包。
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
?
cnpm i babel-preset-env babel-preset-stage-0 -D
?
cnpm i babel-preset-react -D
第二步，在webpackconfig 中配置loader 配置項
module :?{ //webpack 默認只能處理 .js 后綴文件，其他的需要安裝包loader進行處理，
rules :[ //第三方匹配規則，
{test :?/\.js|jsx$/,use :?'babel-loader',exclude :?/node_modules/}
?//千萬別忘記添加排除項
]
?
}
?
第三步、配置相關的.babelrc配置文件
{
"presets"?: ["env","stage-0","react"],
"plugins"?: ["transform-runtime"]
}
?
?
8.JSX ?語法學習
//上面這個方式比較復雜，不人性化
//const h11= <div>這個是一個div</div>，但是不能解析，需要相關的包，需要使用bable 進行轉換。
let?a?= 10?///等價于 const a = 10
let?str?= '您好，劉送杰同學';
const?h1?= <h1>這個是一h1</h1>
ReactDOM.render(<div>
{a}--<hr/>{str}
<hr/>{h1}
</div>,document.getElementById('app'))
?
?
JSX 就是可以在JS 中運行HTML，相關變量用{}括號包裹起來，然后進行相關的運行。
并且React ?中的相關元素標簽必須是閉合的。
?
9.
?
?
?
10.
?
?
11.
?
?
總結
以上是生活随笔為你收集整理的React 学习第一天-2018-07-21的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 便利店的充电桩一般多少伏？
- 下一篇： React 学习第二天 2018-0