React學習（一）----- JSX
阿新 • • 發佈：2021-08-24
1、React簡介
- React地址
1.英文官網:https://reactjs.org/
2.中文官網:https://react.docschina.org/
- React是什麼？（官網地址：https://react.docschina.org/docs/getting-started.html）
React是一個用於構建使用者介面（檢視）的 JavaScript 庫。即：React是一個將資料渲染為HTML檢視的開源JavaScript 庫。
- React是誰開發的？
由國外知名軟體公司 Facebook 開發，且開源，目前版本：v17.0.2。
- 為什麼要學React?
- 原生JavaScript 庫操作 DOM 繁瑣、效率低（DOM-API 操作 UI ）
- 使用 JavaScript 直接操作 DOM ，瀏覽器會進行大量的迴流和重繪，效率低
- 原生 JavaScript沒有元件化編碼方案，程式碼複用率低
- React的特點？
- 採用元件化模式，宣告式編碼，提高開發效率和元件複用率；
- 在 React Native 中可以使用 React 語法進行移動端開發；
- 使用 虛擬DOM + 優秀的 Diffing 演算法，儘量減少與真實 DOM 的互動；
2、React 的基本使用
- 下載依賴包
1、cnpm i react react-dom --save-dev
①node_modules/react/umd/react.development.js React的核心庫 ②node_modules/react-dom/umd/react-dom.development.js React的擴充套件庫，用來渲染虛擬dom 2、cnpm i babel-standalone --save-dev ③ node_modules/.../babel.js babel作用 : 1)es6+ 轉 es5的工具 2)瀏覽器只識別js檔案，所以它能解析 jsx === javascript+xml 將其轉化為js jsx可以提供“語法糖” - 一個簡單的Hello-word
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <
View Codemeta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hello React</title> </head> <body> <!-- 容器 --> <div id="box"></div> <!-- 引入 React 的核心庫 全域性物件 React引入 --> <script type="text/javascript" src="./js/react.development.js"></script> <!-- 引入 react-dom ,用於支援react操作dom 全域性物件ReactDOM引入 --> <script type="text/javascript" src="./js/react-dom.development.js"></script> <!-- 引入babel 用於將jsx轉換為瀏覽器識別的js檔案 --> <script type="text/javascript" src="./js/babel.min.js"></script> <!-- 執行的指令碼 --> <script type="text/babel">/*此處一定要寫babel，表示裡面的語法為jsx語法，並且需要通過jsx進行轉換，不寫預設為js*/ // 1、建立一個虛擬dom const VDOM = <h1>Hello , React!</h1>/* 此處一定不要寫引號，因為不是字串 */ // 2、渲染虛擬dom到頁面 console.log(React) console.log(ReactDOM) // 第一個引數：需要渲染的(虛擬)DOM結構 // 第二個引數: 將這個虛擬DOM掛載到哪個指定位置 // 第三個引數：成功後執行的回撥函式(一般不用) ReactDOM.render(VDOM,document.getElementById("box")) </script> </body> </html> - 建立虛擬 DOM 的兩種方式
- 純 js 的方式
<!-- * @Descripttion: * @version: * @Author: 北梔女孩兒 * @Date: 2021-08-18 16:27:32 * @LastEditTime: 2021-08-19 10:05:23 --> <!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>hello React</title> </head> <body> <!-- 容器 --> <div id="box"></div> <!-- 引入 React 的核心庫 全域性物件 React引入 --> <script type="text/javascript" src="../js/react.development.js"></script> <!-- 引入 react-dom ,用於支援react操作dom 全域性物件ReactDOM引入 --> <script type="text/javascript" src="../js/react-dom.development.js"></script> <!-- 執行的指令碼 --> <script type="text/javascript"> // 1、document.createElement 建立一個真實DOM ，React.createElement建立一個虛擬dom 標籤名 標籤屬性 標籤內容 const VDOM = React.createElement('h1',{id:"title"},React.createElement('span',{},'Hello , React!')) // 2、渲染虛擬dom到頁面 console.log(React) console.log(ReactDOM) // 第一個引數：需要渲染的(虛擬)DOM結構 // 第二個引數: 將這個虛擬DOM掛載到哪個指定位置 // 第三個引數：成功後執行的回撥函式(一般不用) ReactDOM.render(VDOM,document.getElementById("box")) </script> </body> </html>
View Code - JSX方式
<!-- * @Descripttion: * @version: * @Author: 北梔女孩兒 * @Date: 2021-08-18 16:27:32 * @LastEditTime: 2021-08-19 10:04:09 --> <!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>hello React</title> </head> <body> <!-- 容器 --> <div id="box"></div> <!-- 引入 React 的核心庫 全域性物件 React引入 --> <script type="text/javascript" src="../js/react.development.js"></script> <!-- 引入 react-dom ,用於支援react操作dom 全域性物件ReactDOM引入 --> <script type="text/javascript" src="../js/react-dom.development.js"></script> <!-- 引入babel 用於將jsx轉換為瀏覽器識別的js檔案 --> <script type="text/javascript" src="../js/babel.min.js"></script> <!-- 執行的指令碼 --> <script type="text/babel">/*此處一定要寫babel，表示裡面的語法為jsx語法，並且需要通過jsx進行轉換，不寫預設為js*/ // 1、建立一個虛擬dom const VDOM = <h1 id="title"><span>Hello , React!</span></h1>/* 此處一定不要寫引號，因為不是字串 */ // 2、渲染虛擬dom到頁面 console.log(React) console.log(ReactDOM) // 第一個引數：需要渲染的(虛擬)DOM結構 // 第二個引數: 將這個虛擬DOM掛載到哪個指定位置 // 第三個引數：成功後執行的回撥函式(一般不用) ReactDOM.render(VDOM,document.getElementById("box")) </script> </body> </html>
View Code效果：
結論：JSX可以讓編碼人員方便的建立虛擬DOM，JSX是使用純 js 建立虛擬DOM的一個”語法糖”，經過babel轉換後瀏覽器中解析的是第一種js的方式建立的虛擬DOM；
- 純 js 的方式
- 虛擬 DOM 和真實 DOM
// 1、建立一個虛擬dom const VDOM = (/* 此處一定不要寫引號，因為不是字串 */ <h1 id="title"> <span>Hello , React!</span> </h1> ) const TDOM = document.getElementById("box") console.log('虛擬dom',VDOM) console.log('真實dom',TDOM) // debugger; /* 關於虛擬Dom 1、本質是Object型別的物件（一般物件） 2、虛擬dom比較“輕”（身上的屬性少），真實Dom比較“重”，因為虛擬dom是React內部在用，無需真實dom那麼多的屬性 3、虛擬DOM物件最終都會被React轉換為真實的DOM，呈現到頁面上 */ console.log(VDOM) console.log(typeof VDOM)//object console.log(VDOM instanceof Object)//true
- JXS 的語法規則
1.全稱: JavaScript + XML 2.react定義的一種類似於XML的JS擴充套件語法: JS + XML 本質是React.createElement(component,props,...children)方法的語法糖 3、定義虛擬dom時，不要寫引號 標籤中混入 js 表示式時，需要{}，{變數名} {裡面可以寫條件表示式 ? :}-----{flag ? '' : ''} 繫結class屬性時，改為className，因為class在es6中是個繼承關鍵字 繫結style屬性：style={{}}-----即差值表示式裡面是一個物件 label標籤中，for屬性改為htmlFor 只有一個根元素 標籤必須閉合 在react中，為了區分標籤和元件，元件的名稱第一個字母必須大寫(標籤必須閉合，如何不閉合會報錯)，標籤的名稱必須小寫 (1)標籤首字母小寫字母開頭，則將該標籤轉為html中的同名元素，若html中無該標籤的同名元素，則報錯 (2)標籤首字母大寫字母開頭，react就去渲染相對應的元件，若元件沒有定義，則報錯
4、{陣列名}可以直接輸出，{物件名.變數名}！！！物件不能直接輸出,必須用 變數名 訪問
5、一定要注意區分：【js程式碼（語句）】與【js表示式】
(1)表示式：一個表示式會產生一個值，可以放在任何一個需要值得地方，例如a，a+b，demo(1)，arr.map()，function test(){}
(2)語句（程式碼）：if，for，switch， - 舊版本（16.8）
- 新版本（）
3、模組與元件、模組化與元件化的理解
- 模組
理解：向外提供特定功能的js程式, 一般就是一個js檔案 為什麼要拆成模組：隨著業務邏輯增加，程式碼越來越多且複雜。 作用：複用js, 簡化js的編寫, 提高js執行效率 - 元件
理解：用來實現區域性功能效果的程式碼和資源的集合(html/css/js/image等等) 為什麼要用元件： 一個介面的功能更復雜 作用：複用編碼, 簡化專案編碼, 提高執行效率 - 模組化
當應用的js都以模組來編寫的, 這個應用就是一個模組化的應用
- 元件化
當應用的js都以模組來編寫的, 這個應用就是一個模組化的應用
迴流和重繪，效率低
北梔女孩兒