一，React簡介
1.什么是React
- React 是一個用于構(gòu)建用戶界面的 JavaScript 庫，主要用于構(gòu)建 UI，而不是一個 MVC 框架，但可以使用 React 作為 MVC 架構(gòu)的 View 層輕易的在已有項目中使用，它是一個用于構(gòu)建用戶界面的 JavaScript 庫，起源于 Facebook 的內(nèi)部項目，用來架設(shè) Instagram 的網(wǎng)站，于 2013 年 5 月開源。
- React 是用于動態(tài)構(gòu)建用戶界面的 JavaScript 庫(只關(guān)注于視圖)。React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關(guān)注和使用它。
2.React工作原理
- React 在內(nèi)存中創(chuàng)建一個虛擬 DOM。
- React 不是直接操作瀏覽器的 DOM，而是在內(nèi)存中創(chuàng)建一個虛擬 DOM，在對瀏覽器 DOM 進(jìn)行更改之前，它會在其中執(zhí)行所有必要的操作。
- React 只改變需要改變的地方！
- React 找出已經(jīng)進(jìn)行了哪些更改，并只更改需要更改的內(nèi)容。
3.React歷史
React.JS 的當(dāng)前版本是 V18.0.0（2022 年 4 月）。
首次向公眾發(fā)布 (V0.3.0) 于 2013 年 7 月。
React.JS 于 2011 年首次用于 Facebook 的 Newsfeed 功能。
Facebook 軟件工程師 Jordan Walke 創(chuàng)建了它。
4.React的特點
- React速度快（虛擬DOM）
與其他框架相比，React采用了獨特操作DOM的方式。
它并不直接對DOM進(jìn)行操作，它引入了一個虛擬DOM的概念，安插在JavaScript邏輯和實際的DOM之間，這一概念提高了WEB性能，我們所謂的 DOM 樹其實就是一個樹狀結(jié)構(gòu)嵌套的 JavaScript 對象。而在瀏覽器中，DOM 樹的改動會造成瀏覽器一系列的計算，因此我們可以基于現(xiàn)有的 DOM 樹結(jié)構(gòu)，克隆出一份一模一樣的 DOM 樹，即“虛擬 DOM ”，將所有的改動都實現(xiàn)在這棵虛擬 DOM 上，然后統(tǒng)一合并至瀏覽器中的 DOM 樹中以解決之前所提到的性能瓶頸。 - 跨瀏覽器兼容
虛擬DOM幫助我們解決了跨瀏覽器問題，它為我們提供了標(biāo)準(zhǔn)化的API，甚至在IE8中都是沒問題的 - 組件化
為程序編寫?yīng)毩⒌哪K化UI組件，并且它們可以引入其他組件。這等同于提高了代碼的可維護(hù)性。 - 單向數(shù)據(jù)流
在 React 中，數(shù)據(jù)的組織形式是樹狀的，由上至下單向流動（對應(yīng)DOM樹），之所以這樣設(shè)計，是因為：數(shù)據(jù)流更清晰，組件的狀態(tài)就更可控； - 純粹的JavaScript語法
我們很容易就忽視 React 的這一特點，即在 React 中，沒有任何特殊的專有的 React 語法需要理解和記憶，所有的組件，數(shù)據(jù)操作，業(yè)務(wù)邏輯都是通過使用 JavaScript 語法實現(xiàn)的。
5. React 高效的原因
- 使用虛擬 (virtual)DOM, 不總是直接操作頁面真實DOM。
- DOM Diffing算法, 最小化頁面重繪。
6.React 官方網(wǎng)站
- 英文官網(wǎng): https://reactjs.org/
- 中文官網(wǎng): https://react.docschina.org/
二，React基本使用
1.基礎(chǔ)代碼
- 在書寫React前需要先引入React 的
js代碼庫下載地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 準(zhǔn)備好一個容器 -->
<div id="test"></div>
<!-- 引入 React 核心庫 -->
<script src="../js/react.development.js"></script>
<!-- 引入 react-dom 用于支持 react 操作 DOM -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel：
1. ES6 ==> ES5
2. jsx ==> js
-->
<script src="../js/babel.min.js"></script>
<script type="text/babel">
// 1. 創(chuàng)建虛擬 DOM
const VDOM = <h1>Hello，React</h1>
// 2. 渲染到頁面中的指定 DOM
// ReactDOM.render(虛擬DOM，真實DOM)
ReactDOM.render(VDOM,document.getElementById('test'))
</script>
</body>
</html>
- 效果
2.相關(guān)js庫
-
react.js：React核心庫。 -
react-dom.js：提供操作DOM的react擴展庫。 -
babel.min.js：解析JSX語法代碼轉(zhuǎn)為JS代碼的庫。
<!-- 引入React核心庫 -->
<script src="../js/react.development.js"></script>
<!-- 操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel ES6==>ES5 JSX==>JS -->
<script src="../js/babel.min.js"></script>
3.創(chuàng)建虛擬DOM的兩種方式
1）js形式(不常用)：
<script type="text/babel">
const vdom = React.createElement('h1', { id: 'title' }, 'hello，react')
// ReactDOM.render(虛擬dom,真實Dom)
ReactDOM.render(vdom, document.getElementById('test'))
</script>
2）jsx形式：
<script type="text/babel">
const VDOm = <h1>Hello,react</h1>
// ReactDOM.render(虛擬dom,真實Dom)
ReactDOM.render(VDOm, document.getElementById('test'))
</script>
4.虛擬DOM與真實DOM
- React提供了一些API來創(chuàng)建一種 “特別” 的一般js對象
const VDOM = React.createElement(‘xx’,{id:‘xx’},‘xx’)
上面創(chuàng)建的就是一個簡單的虛擬DOM對象 - 虛擬DOM對象最終都會被React轉(zhuǎn)換為真實的DOM
我們編碼時基本只需要操作react的虛擬DOM相關(guān)數(shù)據(jù), react會轉(zhuǎn)換為真實DOM變化而更新界。 - 我們編碼時基本只需要操作react的虛擬DOM相關(guān)數(shù)據(jù), react會轉(zhuǎn)換為真實DOM變化而更新界。
<script type="text/babel">
// 1. 創(chuàng)建虛擬 DOM
const VDOM = (
<h1>Hello，
<span>React</span>
</h1>
)
// 2. 渲染到頁面中的指定 DOM
// ReactDOM.render(虛擬DOM，真實DOM)
ReactDOM.render(VDOM,document.getElementById('test'))
const TDOM = document.getElementById('demo')
// console.log(typeof VDOM) // Object
// console.log(VDOM instanceof Object) // true
console.log('虛擬DOM',VDOM)
console.log('真實DOM',TDOM)
// 調(diào)試
debugger
</script>
5. 虛擬DO M與真實DOM區(qū)別
- 虛擬dom不會進(jìn)行排版與重繪操作，虛擬dom是把js代碼轉(zhuǎn)為真實dom
真實dom頻繁回流與重繪效率非常低 - 虛擬dom可以跨平臺操作而真實dom是與瀏覽器綁定的
- 虛擬dom進(jìn)行頻繁修改，之后一次性比較在修改真實dom中需要修改的部分，最后真實dom進(jìn)行排版重繪，從而減少dom節(jié)點的排版與重繪的損耗
三，jsx的使用
1.什么是jsx
- JavaScript的語法擴展
JSX是一種JavaScript的語法擴展，首先運用于React中，其格式比較像是模版語言，但事實上完全是在JavaScript內(nèi)部實現(xiàn)的。元素是構(gòu)成React應(yīng)用的最小單位，JSX就是用來聲明React當(dāng)中的元素。
React主要使用JSX來描述用戶界面，但React并不強制要求使用JSX ，而JSX也在React之外的框架得到了廣泛的支持，包括Vue.js ，Solid 等
- 全稱:
JavaScript XML - react定義的一種類似于XML的
JS擴展語法: JS + XML本質(zhì)是React.createElement(component, props, …children)方法的語法糖 - 作用: 用來
簡化創(chuàng)建虛擬DOM- 寫法：var ele = < h1 >Hello JSX!</ h1 >
- 注意1：它不是
字符串, 也不是HTML/XML標(biāo)簽 - 注意2：它最終產(chǎn)生的就是一個
JS對象
- 標(biāo)簽名任意: HTML標(biāo)簽或其它標(biāo)簽
- 標(biāo)簽屬性任意: HTML標(biāo)簽屬性或其它
- 基本語法規(guī)則
- 遇到
<開頭的代碼, 以標(biāo)簽的語法解析: html同名標(biāo)簽轉(zhuǎn)換為html同名元素, 其它標(biāo)簽需要特別解析 - 遇到以 { 開頭的代碼，以JS語法解析: 標(biāo)簽中的
js表達(dá)式必須用{ }包含
- 遇到
-
babel.js的作用- 瀏覽器不能直接
解析JSX代碼, 需要babel轉(zhuǎn)譯為純JS的代碼才能運行 - 只要用了JSX，都要加上
type="text/babel", 聲明需要babel來處理
- 瀏覽器不能直接
2.渲染虛擬DOM(元素)
- 語法: ReactDOM.render(virtualDOM, containerDOM)
- 作用: 將虛擬DOM元素渲染到頁面中的真實容器DOM中顯示
- 參數(shù)說明
- 參數(shù)一: 純js或jsx創(chuàng)建的虛擬dom對象
- 參數(shù)二: 用來包含虛擬DOM元素的真實dom元素對象(一般是一個div)
3. jsx具體使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.title {
color: aqua;
}
</style>
<body>
<div id="test">
</div>
<!-- 引入React核心庫 -->
<script src="../js/react.development.js"></script>
<!-- 操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel ES6==>ES5 JSX==>JS -->
<script src="../js/babel.min.js"></script>
<script type="text/babel">
let mydata = 'student';
let data = ['hhz', 'ycc', 'wsh']
let myId = 'IT'
let img = "https://tse1-mm.cn.bing.net/th/id/OIP-C.x0O2Az9JvDMbgiyyU5jNCQHaDm?w=308&h=170&c=7&r=0&o=5&pid=1.7"
function txt() {
const vdom = (
<div>
<h1 className="title" id={myId}>Hello,
<span>{mydata}</span>
<span>{new Date().toLocaleTimeString()}</span>
</h1>
<img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.x0O2Az9JvDMbgiyyU5jNCQHaDm?w=308&h=170&c=7&r=0&o=5&pid=1.7" />
<ul>
{
data.map((item, index) => {
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
// ReactDOM.render(虛擬dom,真實Dom)
ReactDOM.render(vdom, document.getElementById('test'))
}
setInterval(txt, 1000)
</script>
</body>
</html>
3. jsx的語法規(guī)則：
- 定義虛擬DOM的時候，不要寫引號；
- 標(biāo)簽中混入JS表達(dá)式時，要用{}
- 樣式的類名指定不要用class,要用className
- 內(nèi)聯(lián)樣式，要用style={{key:value}}的形式去寫
- 只能有一個根元素
- 所有的表現(xiàn)都必須閉合
- 標(biāo)簽的首字母：
1) 若是小寫字母開頭，則將改標(biāo)簽轉(zhuǎn)化為html同名的元素，渲染到頁面
若沒有html同名標(biāo)簽，則抱錯
2) 若大寫字母開頭，react就去渲染對應(yīng)的組件，若組件沒有定義，則報錯；
四，模塊與組件、模塊化與組件化的理解
1. 模塊
- 理解：向外提供特定功能的js程序, 一般就是一個js文件
- 為什么要拆成模塊：隨著業(yè)務(wù)邏輯增加，代碼越來越多且復(fù)雜。
- 作用：復(fù)用js, 簡化js的編寫, 提高js運行效率
什么是模塊
- 將代碼拆分成獨立的塊，然后再把這些塊連接起來可以通過模塊模式來實現(xiàn)
模塊化
- 當(dāng)應(yīng)用的js都以模塊來編寫的, 這個應(yīng)用就是一個模塊化的應(yīng)用
2.組件
- 理解：用來實現(xiàn)局部功能效果的代碼和資源的集合(html/css/js/image等等)
- 為什么要用組件： 一個界面的功能更復(fù)雜
- 作用：復(fù)用編碼, 簡化項目編碼, 提高運行效率
什么是組件
- 組件也是抽象的概念,可以理解為一些符合某種規(guī)范的類組合在一起就構(gòu)成了組件
組件化
- 當(dāng)應(yīng)用是以多組件的方式實現(xiàn), 這個應(yīng)用就是一個組件化的應(yīng)用
3. 函數(shù)式組件
<script type="text/babel">
let data=["123","222"]
function MyComponent(props) {
console.log(this)//這里的this是undefined，因為babel編譯，開啟了嚴(yán)格模式
console.log(props, '11111')
return <h2>我是函數(shù)定義的組件(適用于簡單組件的定義){props.name}</h2>
}
// ReactDOM.render(虛擬dom,真實Dom)
ReactDOM.render(<MyComponent name={data} />, document.getElementById('test'))
</script>
執(zhí)行ReactDOM.render()方法之后，發(fā)生了什么
1.React解析了組件標(biāo)簽，找到了對應(yīng)的組件
2.發(fā)現(xiàn)這個組件是一個函數(shù)定義的，隨后調(diào)用該函數(shù)，生成一個虛擬dom
3.最后將虛擬dom轉(zhuǎn)化成為真實dom，呈現(xiàn)在頁面中
4.類式組件
<script type="text/babel">
// 1. 創(chuàng)建一個類式組件
class MyComponent extends React.Component{
// render方法是放在原型上的
// render中的this是誰？ -- 實例對象 <===> MyComponent組件實例對象
render(){
console.log('render中的this',this)
return <h2>我是用類定義的組件（適用于【復(fù)雜組件】的定義）</h2>
}
}
// 2. 渲染到頁面中的指定 DOM
// ReactDOM.render(虛擬DOM，真實DOM)
ReactDOM.render(<MyComponent />,document.getElementById('test'))
let c = new MyComponent()
console.log(c)
</script>
類式組件執(zhí)行過程？
React 解析了組件標(biāo)簽，找到對應(yīng)的組件
發(fā)現(xiàn)這個組件是一個類定義的，隨后new出來一個實例對象，并通過該實例調(diào)用原型上的render方法
將render()返回的內(nèi)容生成了一個虛擬DOM
最后將虛擬DOM轉(zhuǎn)化為真實DOM，呈現(xiàn)在頁面中；
使用組件時注意：
1. 組件名必須首字母大寫 2. 虛擬DOM元素只能有一個根元素 3. 虛擬DOM元素必須有結(jié)束標(biāo)簽文章來源：http://www.zghlxwxcb.cn/news/detail-797667.html
總結(jié)
以上就是React入門的所有東西。希望本篇文章能夠幫助到你，不懂得可以評論區(qū)或者私信問我，我也會一 一解答。謝謝觀看！
我的其他文章:https://blog.csdn.net/m0_60970928?type=blog文章來源地址http://www.zghlxwxcb.cn/news/detail-797667.html
到了這里，關(guān)于React 超詳細(xì)入門教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
