當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

React 学习第一天-2018-07-21

發布時間：2024/10/8 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 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 對象模擬這個對象

//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 ?中的相關元素標簽必須是閉合的。

10.

11.

總結

以上是生活随笔為你收集整理的React 学习第一天-2018-07-21的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

React