一、概述
1.1、基礎概念
React 基礎、React-Router、PubSub、Redux、AntD
定義：用於構建用戶界面的JavaScript庫；是一個將數據渲染爲HTML視圖的開源JavaScript庫。
爲什麼要學，痛點
1、原生js操作DOM繁瑣、效率低（DOM-API操作UI）
2、使用js直接操作DOM，瀏覽器會進行大量的重繪重拍
3、原生js沒有組件化編碼方案，代碼複用率低
React 特點
1、採用組件化模式、聲明式編碼，提高開發效率及組件複用率
2、在React Native中可以使用React語法進行移動端開發
3、使用虛擬DOM+優秀的Diffing算法，儘量減少與真實DOM的交互
基礎：判斷this的指向、class、ES6、npm、原型原型鏈、數組常用方法、模塊化
1.2、通過寫js方式寫react
核心js
react.development.js 核心庫
react-dom.development.js 操作dom
babel.min.js 作用：ES6==》ES5、jsx==>js、import使用
使用VScode開發，安裝個 live server運行頁面快速調試
<body> <!-- 準備好一個容器 --> <div id="test"></div> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 生產環境中不建議使用 --> <script src="https://unpkg.com/[email protected]/babel.min.js"></script> <script type="text/babel"> //1、創建虛擬DOM const VDOM=<h1> hello ,React </h1> //一定不要寫 引號，因爲不是字符串 //2、渲染虛擬DOM到頁面 全局對象 React、ReactDOM對象 ReactDOM.render(VDOM,document.getElementById('test')); </script> </body>
1.3、爲什麼使用JSX
JSX 是js的語法糖，使用babel翻譯，語法邏輯簡單。
實現如下
<div id="test"><h1 id="title"><span>hello ,React</span></h1></div>
使用js實現
<body> <!-- 準備好一個容器 --> <div id="test"></div> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script type="text/javascript"> //1、創建虛擬DOM const SPAN = React.createElement('span', {}, 'Hello React'); const VDOM = React.createElement('h1', { id: 'title' }, SPAN); //2、渲染虛擬DOM到頁面 全局對象 React、ReactDOM對象 ReactDOM.render(VDOM, document.getElementById('test')); </script> </body>
通過JSX
<body> <!-- 準備好一個容器 --> <div id="test"></div> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 生產環境中不建議使用 --> <script src="https://unpkg.com/[email protected]/babel.min.js"></script> <script type="text/babel"> //1、創建虛擬DOM const VDOM = (//一定不要寫 引號，因爲不是字符串 <h1 id="title"> <span>hello ,React</span> </h1> ) //2、渲染虛擬DOM到頁面 全局對象 React、ReactDOM對象 ReactDOM.render(VDOM, document.getElementById('test')); </script> </body>
1.4、虛擬DOM與真實DOM
虛擬DOM
1、本質是一個Object類型對象（一般對象）
2、虛擬DOM比較輕，真實DOM比較重，因爲虛擬DOM是React內部使用，無需真實DOM那麼多屬性
3、虛擬DOM最終會被React轉化爲真實DOM，呈現在頁面上。
<body> <!-- 準備好一個容器 --> <div id="test"></div> <div id="demo"></div> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 生產環境中不建議使用 --> <script src="https://unpkg.com/[email protected]/babel.min.js"></script> <script type="text/babel"> //1、創建虛擬DOM const VDOM = (//一定不要寫 引號，因爲不是字符串 <h1 id="title"> <span>hello ,React</span> </h1> ) //2、渲染虛擬DOM到頁面 全局對象 React、ReactDOM對象 ReactDOM.render(VDOM, document.getElementById('test')); const TDOM = document.getElementById('demo'); console.log("虛擬DOM", VDOM) console.log("真實DOM", TDOM) debugger; console.log("typeof VDOM:",typeof VDOM) console.log("VDOM instanceof Object:",VDOM instanceof Object) </script> </body>
控制檯
真實DOM 屬性非常多
1.5、JSX
全稱：JavaScript XML
React定義的一種類似XML的js擴展語法：JS+XML
本質是React.createElement(Componment,props,...children)方法的預發糖
作用：用來簡化創建虛擬Dom
寫法：var a = <h1>hello jsx</h1> 不要加引號
注意1、他不是字符串，也不是HTML、XML標籤
注意2、他最終產生的就是一個JS對象
規則
1、定義虛擬DOM，不要寫引號
2、標籤中混入JS表達式時要用 {}
JS語句(代碼)與JS表達式區別
表達式：一個表達式會產生一個值，可以放任何需要值的地方,能定義變量接受值的 都是表達式
如：a、a+b、demoMethod(1)、arr.map()、function test(){}、
語句(代碼)
控制語句：if(){}、for(){}、switch(){case:x}
3、樣式的類型不要用class，要用className
4、內嵌樣式，要用style={{key:value}}的方式
5、虛擬DOM只能有一個跟標籤
6、標籤必須閉合
7、標籤首字母
a、首字母小寫開頭，會同名轉化爲html標籤，沒有報錯
b、首字母大寫開頭，react就去渲染對應的組件，沒定義就報錯
示例
<body> <!-- 準備好一個容器 --> <div id="test"></div> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <!-- 生產環境中不建議使用 --> <script src="https://unpkg.com/[email protected]/babel.min.js"></script> <script type="text/babel"> // 模擬數據 const data=["Angular","React","Vue"] //1、創建虛擬DOM const VDOM = (//一定不要寫 引號，因爲不是字符串 <div> <h1 > 前端JS框架列表 </h1> <ul> { data.map((item,index)=>{ return <li key={index}>{item}</li> }) } </ul> </div> ) //2、渲染虛擬DOM到頁面 全局對象 React、ReactDOM對象 ReactDOM.render(VDOM, document.getElementById('test')); </script>
1.6、模塊與組件、模塊化與組件化
模塊
理解：向外提供特定功能的JS程序，一般就是一個js文件
爲什麼：要拆成模塊，隨着業務邏輯增加，代碼越來越多且複雜
作用：複用js，簡化js的編寫，提高js運行效率
組件
理解：用來實現局部功能效果的代碼和資源的集合（html、css、js、image）
爲什麼：一個界面的功能更復雜
作用：複用編碼，簡化項目編碼，提高運行效率
模塊化
當應用的js都可以模塊來編寫的，這個應用就是一個模塊化應用
組件化
當應用是以多組件的方式實現，這個應用就是一個組件化的應用
1.7、工具安裝與使用
chrome 下載React dev tools【紅色開發模式未打包，藍色發佈的；F12有Componments、Profiler性能】
vscode
vscode live server