React基礎
一.介紹React
用於構建用戶界面的 JavaScript 庫javascript
二.react特色
- 聲明式：React 能夠很是輕鬆地建立用戶交互界面。爲你應用的每個狀態設計簡潔的視圖，在數據改變時 React 也能夠高效地更新渲染界面。
- 組件化：建立好擁有各自狀態的組件，再由組件構成更加複雜的界面。
- 一次學習，隨處編寫：不管你如今正在使用什麼技術棧，你均可以隨時引入 React 開發新特性。React 也能夠用做開發原生應用的框架 React Native.
三.第一個React程序
注意:在開始第一個react程序以前要搞清楚react的本質就是js代碼,因此第一個程序咱們直接在HTML代碼中演示css
react.htmlhtml
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> const element=<div title="welcome">hello React</div> ReactDOM.render(element,document.getElementById("app")) </script>
</body>
</html>
複製代碼
分析第一個react程序的三個步驟
1.引包
cdn方式vue
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
複製代碼
本地方式java
<!-- react的核心庫 -->
<script src="lib/react.development.js"></script>
<!-- 提供與DOM相關的功能 -->
<script src="lib/react-dom.development.js"></script>
<!-- 將es6的語法轉成es5,包括react的jsx語法，須要經過babel轉換 -->
<script src="lib/babel.min.js"></script>
複製代碼
注意:本地方式引包要注意相對路徑,以及各個文件庫的順序,在實際的開發中比較少採用本地引包的方式,而是使用webpack打包工具以及npmreact
2.建立react元素
<script type="text/babel"> // 建立react元素 // 參數1： 元素的名稱 // 參數2： 元素的屬性 // 參數3： 元素的內容（子元素） const element = React.createElement('div', { title: 'welcome',className:'on' }, 'Hello React！！！') </script>
複製代碼
注意:webpack
-
若是在瀏覽器端使用babel，必須指定type='text/babel'git
-
createElement()方法程序員
這個方法一共有三個參數,若某一個參數沒有值,則須要用null來代替,不然將會報錯es6
這種方式來建立元素實在是太過麻煩,因此咱們使用jsx語法來寫
<script type="text/babel"> const element=<div title="welcome">hello React</div> </script> 複製代碼
3.渲染元素到頁面中
準備html的結構
<div id="app"></div>
複製代碼
把元素渲染到頁面
// 把元素渲染到頁面中
// 參數1：須要渲染的react對象
// 參數2：指定渲染到頁面中的容器
ReactDOM.render(
element,
document.getElementById('app')
)
複製代碼
四.jsx語法
jsx: 一種 JavaScript 的語法擴展。 在react中推薦使用react來描述用戶界面（建立react對象）
經過jsx建立react對象，實質內部仍是調用createElement方法，只不過jsx語法更加的簡潔
1.jsx語法須要注意的要點
- jsx雖然看起來像模板，可是jsx是一個js對象，並非字符串，也不是DOM對象
- 在jsx中可使用表達式，在標籤中使用須要使用
{}包裹起來便可,但{}只能出現表達式，不能出現語句 - 爲了代碼可讀性，書寫jsx的時候須要保證代碼的縮進,而且給jsx的代碼使用
()包裹起來 - jsx中的註釋 不是//而是{/* */}
- jsx中的元素只能有一個根元素，而且標籤必須閉合,能夠是單標籤,可是單標籤也要閉合。
- 由於 JSX 的特性更接近 JavaScript 而不是 HTML ,因此jsx的屬性是js的屬性，好比class變成了className
注意:以上所說的要點在書寫代碼是必定要注意,不然會出現報錯
2.jsx語法體驗
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
<style> .on{ color:red; } </style>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> function fn() { return 'hello react' } const msg = { str:'你好呀', age: 18 } const element=(<div> <h1>{msg.str}</h1> <div title="welcome" className="on">{fn()}</div> </div>) ReactDOM.render(element,document.getElementById("app")) </script>
</body>
</html>
複製代碼
3.案例:實現時鐘功能
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> function tick(){ //定義react對象 const element=( <div> <h1>北京時間</h1> <h2>當前時間:{new Date().toLocaleString()}</h2> </div> ) //把react對象渲染到頁面中 ReactDOM.render(element,document.getElementById("app")) } setInterval(tick, 1000); </script>
</body>
</html>
複製代碼
五.React中的虛擬DOM與diff算法
注意:面試官的最愛
React 中最值得稱道的部分莫過於 Virtual DOM 與 diff 的完美結合，特別是其高效的 diff 算法，讓用戶能夠無需顧忌性能問題而」任性自由」的刷新頁面
我沒有能力用代碼這種高大尚的方式來演繹什麼是虛擬DOM,什麼是diff算法,以及虛擬DOM與真實的DOM的區別,下面就講一下理解吧
1.真實的DOM
DOM就是文檔對象模型的意思,html中的每個標籤元素能夠理解爲一個DOM節點,一個網頁就是由許許多多的DOM節點構成
2.虛擬的DOM
- 使用js對象來描述一個DOM結構，在react框架中，這種方式描述一個DOM的對象稱爲虛擬DOM
- 頁面的更新能夠先所有反映在js對象上，操做內存中的js對象的速度顯然要快多了，不須要重繪與迴流
- 等更新完後，再將最終的js對象映射成真實的DOM，交由瀏覽器去繪製。
3.diff算法
diff算法，就是用來找出兩段文本之間的差別的一種算法。
4.爲何要使用diff算法
DOM操做是很是昂貴的，所以咱們須要儘可能地減小DOM操做。這就須要找出本次DOM必須更新的節點來更新，其餘的不更新，這個找出的過程，就須要應用diff算法。
5.爲何使用虛擬的DOM
要理解爲何要使用虛擬的DOM,這裏有必要了解瀏覽器的渲染機制
瀏覽器是怎麼樣渲染一個代碼量龐大的頁面的呢?
6.React中DOM的更新方式
1.使用虛擬DOM(JavaScript)對象結構表示 DOM 樹的結構，根據虛擬DOM渲染出真正的DOM樹
2.當狀態變動的時候，從新構造一棵新的對象樹。而後用新的樹和舊的樹進行比較，記錄兩棵樹差別(diff算法)
3.把2所記錄的差別應用到步驟1所構建的真正的DOM樹上，視圖就更新了
六.組件
組件：組件就是一個自定義的標籤,在react中，組件有兩類,函數組件 ,類組件
1.函數組件
-
自定義一個函數,返回一個react對象,函數名首字母要大小,用於區分普通的html標籤
-
render渲染到頁面上時要注意 :
把組件當作自定義標籤來使用,幷包含在根節點以內
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> //定義函數組件 function Template1(){ return ( <h1>你們好呀,我是第一個測試組件</h1> ) } function Template2(){ return ( <h2>我是第二個測試組件</h2> ) } //渲染到頁面中 //把組件當作自定義標籤來使用,幷包含在根節點以內 ReactDOM.render( <div> <Template1></Template1> <Template2></Template2> </div>,document.getElementById('app') ) </script>
</body>
</html>
複製代碼
函數組件是怎麼傳值的
- props參數傳值
- 帶有形參的組件在外部聲明,使用時能夠嵌套在別的組件裏面並傳入實參
- 渲染的是別的組件
- 有一個缺點,沒有狀態,狀態也就是數據,函數組件本身沒有數據
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> //定義函數組件 function Template1(props){ return ( <div> <h1>你們好呀,我是第一個測試組件</h1> <p>{props.name}</p> <p>{props.age}</p> </div> ) } function Template2(){ return ( <div> {/* 在Template2組件內部，嵌套Template1 */} <Template1 name="zs" age="18"/> </div> ) } //渲染到頁面中的組件是Template2 ReactDOM.render( <div> <Template2></Template2> </div>,document.getElementById('app') ) </script>
</body>
</html>
複製代碼
注意:函數組件的props是隻讀的,並不能修改,好比這樣是錯誤的
//定義函數組件
function Template1(props){
// props.name = '李四'
// props.age = 22
return (
<div> <h1>你們好呀,我是第一個測試組件</h1> <p>{props.name}</p> <p>{props.age}</p> </div>
)
}
複製代碼
案例:實現時鐘功能
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
//定義一個Clock組件，專門用於顯示時間
function Clock (props) {
return (
<div>
<h1>北京時間</h1>
<h2>當前時間：{props.date.toLocaleString()}</h2>
</div>
)
}
setInterval(() => {
// 如何渲染的Clock組件
ReactDOM.render(
<Clock date={new Date()}/>,
document.getElementById('app')
)
}, 1000)
</script>
</body>
複製代碼
2.類組件
爲了幫助你們理解類組件,這裏先給你們介紹一下ES6語法中的類
ES6中的類
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<script> class Person{ //指定構造函數 constructor(name,age){ this.name=name; this.age=age; } //給對象添加方法 sayhi(){ console.log("hello world"); } } var person=new Person(); person.sayhi();//helle world </script>
</body>
</html>
複製代碼
ES6中的類繼承
- 經過super()來繼承父類的構造方法,其餘方法自動繼承
- 在繼承的同時也能夠定義本身的屬性,方法
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<script> class Person{ //指定構造函數 constructor(name,age){ this.name=name; this.age=age; } //給對象添加方法 sayhi(){ console.log("你們好呀"); } } class chinese extends Person{ constructor(name,age){ super(name,age);//繼承父類的構造方法 this.color='yellow'; } read(){ console.log("我喜歡讀中文的書"); } } var student=new chinese("zhangsan","18"); student.sayhi();//你們好呀 console.log(student.name);//zhangsan console.log(student.age);//18 </script>
</body>
</html>
複製代碼
類組件基本模型
- 定義一個類組件必須繼承於React.Component
- 在類中使用render()函數返回模板
- 渲染到頁面中
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> //定義一個類組件 class Hello extends React.Component{ constructor(){ super(); } render(){ return ( <h1>hello world</h1> ) } } //渲染組件 ReactDOM.render( <Hello/>,document.getElementById('app') ) </script>
</body>
</html>
複製代碼
怎麼給類組件傳值
- 在類組件中想要獲取傳遞過來的值，也是經過props來獲取
- 除了props，類組件還能夠本身提供狀態（數據）
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> //定義一個類組件 class Hello extends React.Component{ constructor(props){ super(props); {/*除了props，類組件還能夠本身提供狀態（數據）*/} this.state={ msg:'你好呀' } } render(){ return ( <div> <h1>{this.props.name}</h1> <h1>{this.props.age}</h1> <h1>{this.state.msg}</h1> </div> ) } } //渲染組件 ReactDOM.render( <Hello name="zhangsan" age="18"/>,document.getElementById('app') ) </script>
</body>
</html>
複製代碼
3.函數組件和類組件混合使用
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> //定義一個函數組件 function Template1(){ return ( <h1>你們好呀,我是第一個測試組件</h1> ) } //定義一個類組件 class Template2 extends React.Component{ constructor(props){ super(props); } render(){ return ( <Template1 /> ) } } //渲染組件 ReactDOM.render( <Template2 />,document.getElementById('app') ) </script>
</body>
</html>
複製代碼
七.事件
- 在react中註冊事件與給DOM註冊事件基本是同樣的， onclick onmouseenter onblur onkeyup
- 在react中註冊事件，採用駝峯命名法， onClick onMouseEnter onBlur
- 在react中註冊事件，經過{}傳入的是一個函數, 而不是一個字符串
- 在react中，若是想要阻止瀏覽器的默認行爲，不要使用return false，使用e.preventDefault()
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> //定義一個類組件 class Hello extends React.Component{ render(){ return ( <div> <button onClick={this.fn}>點我</button> <a href="http://www.baidu.com" onClick={this.fn}>跳轉</a> </div> ) } fn(e){ //阻止默認事件 e.preventDefault(); console.log("hello world"); } } //渲染組件 ReactDOM.render( <Hello />,document.getElementById('app') ) </script>
</body>
</html>
複製代碼
1.react事件中的this丟失以及解決方案
點擊修改數據按鈕實現修改顯示的文字
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> //定義一個類組件 class Hello extends React.Component{ constructor(props){ super(props); this.state={ msg:'你好呀' } } render(){ return ( <div> <h1>{this.state.msg}</h1> <button onClick={this.fn}>修改msg數據</button> </div> ) } fn(){ console.log(this) this.setState({ msg:'呵呵' }) } } //渲染組件 ReactDOM.render( <Hello />,document.getElementById('app') ) </script>
</body>
</html>
複製代碼
注意:
按照咱們原來的規則,上面的代碼在運行時出現報錯,fn函數中打印的this是undefined
緣由是什麼呢?
- 在react註冊事件的時候，提供的事件處理函數的內部this指向undefined
- 沒辦法訪問到this，沒有辦法訪問到當前實例，沒有辦法訪問到數據
- 若是想要修改react的狀態，不能直接經過this.setState()去修改
下面提供三種解決方案
-
bind方法： 任何一個函數，都有bind方法，bind方法能夠用來修改函數內部的this指向,能夠在構造函數中，去處理事件處理函數的this問題
<!DOCTYPE html> <html lang=""> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>react基礎</title> </head> <body> <div id="app"></div> <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script> <!-- 生產環境中不建議使用 --> <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script> <script type="text/babel"> //定義一個類組件 class Hello extends React.Component{ constructor(props){ super(props); this.state={ msg:'你好呀' } //在構造函數中，去處理事件處理函數的this問題 this.fn=this.fn.bind(this) } render(){ return ( <div> <h1>{this.state.msg}</h1> <button onClick={this.fn}>修改msg數據</button> </div> ) } fn(){ console.log(this) this.setState({ msg:'呵呵' }) } } //渲染組件 ReactDOM.render( <Hello />,document.getElementById('app') ) </script> </body> </html> 複製代碼 -
屬性初始化器語法, 提供了一個箭頭函數,將匿名函數改成箭頭函數
<!DOCTYPE html> <html lang=""> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>react基礎</title> </head> <body> <div id="app"></div> <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script> <!-- 生產環境中不建議使用 --> <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script> <script type="text/babel"> //定義一個類組件 class Hello extends React.Component{ constructor(props){ super(props); this.state={ msg:'你好呀' } } render(){ return ( <div> <h1>{this.state.msg}</h1> <button onClick={this.fn}>修改msg數據</button> </div> ) } fn=()=>{ console.log(this) this.setState({ msg:'呵呵' }) } } //渲染組件 ReactDOM.render( <Hello />,document.getElementById('app') ) </script> </body> </html> 複製代碼 -
點擊事件裏面提供一個匿名函數,在匿名函數中調用修改數據的方法(不建議這種寫法)
<!DOCTYPE html> <html lang=""> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>react基礎</title> </head> <body> <div id="app"></div> <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script> <!-- 生產環境中不建議使用 --> <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script> <script type="text/babel"> //定義一個類組件 class Hello extends React.Component{ constructor(props){ super(props); this.state={ msg:'你好呀' } } render(){ return ( <div> <h1>{this.state.msg}</h1> <button onClick={ ()=>{ this.fn(); } }>修改msg數據</button> </div> ) } fn(){ console.log(this) this.setState({ msg:'呵呵' }) } } //渲染組件 ReactDOM.render( <Hello />,document.getElementById('app') ) </script> </body> </html> 複製代碼
2.事件傳參問題
在項目中常常會將一些操做的邏輯代碼封裝成一個函數,好比刪除某條記錄,這就會涉及函數傳參問題,那麼react中函數通常是怎麼寫的呢?請看上面的案例,函數傳參也是在這基礎上的
函數傳參的兩種方法
- 在註冊事件的時候，經過bind的方式進行傳參，若還想要獲取事件對象, 把事件對象做爲最後一個參數
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> //定義一個類組件 class Hello extends React.Component{ constructor(props){ super(props); this.state={ msg:'你好呀' } //在構造函數中，去處理事件處理函數的this問題 this.fn=this.fn.bind(this,id) } render(){ return ( <div> <h1>{this.state.msg}</h1> <button onClick={this.fn}>修改msg數據</button> </div> ) } fn(id,e){ console.log(id); console.log(e); } } //渲染組件 ReactDOM.render( <Hello />,document.getElementById('app') ) </script>
</body>
</html>
複製代碼
- 點擊事件裏面提供一個匿名函數,在匿名函數中調用方法時傳參
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> //定義一個類組件 class Hello extends React.Component{ constructor(props){ super(props); this.state={ msg:'你好呀' } } render(){ return ( <div> <h1>{this.state.msg}</h1> <button onClick={ ()=>{ this.fn(3); } }>修改msg數據</button> </div> ) } fn(id){ console.log(id); } } //渲染組件 ReactDOM.render( <Hello />,document.getElementById('app') ) </script>
</body>
</html>
複製代碼
八.組件渲染
1.條件渲染
根據條件不一樣,渲染不一樣的內容,和js中的if-else不一樣
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> function UserGreeting() { return <div>歡迎回來，尊貴的v12用戶</div> } function GuestGreeting() { return <div>你好，請先登陸</div> } class App extends React.Component { constructor(props) { super(props) this.state = { isLogin: true } } // 完成了條件渲染，根據isLogin來渲染不一樣的內容 render() { if (this.state.isLogin) { return <UserGreeting /> } else { return <GuestGreeting /> } } } ReactDOM.render(<App />, document.getElementById('app')) </script>
</body>
</html>
複製代碼
在條件渲染中變量的使用
- 聲明變量來保存react的對象,初始值設爲null
- 不一樣條件下的結果賦值給該變量
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> class Score extends React.Component { constructor(props) { super(props) this.state = { score: 100 } } render() { // 可使用變量來保存react的對象 let content = null if (this.state.score >= 90) { // 元素變量， 把一個react對象賦值給一個變量 content = <p>A</p> } else if (this.state.score >= 80) { content = <p>B</p> } else if (this.state.score >= 70) { content = <p>C</p> } else if (this.state.score >= 60) { content = <p>D</p> } else { content = <p>E</p> } return ( <div> <h3>提示消息</h3> <p>你本次的成績是</p> {content} </div> ) } } ReactDOM.render(<Score />, document.getElementById('app')) </script>
</body>
</html>
複製代碼
在條件渲染中運算符的使用
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> class App extends React.Component { constructor(props) { super(props) this.state = { score: 90, age: 18 } } render() { return ( <div> <h3>提示消息</h3> {this.state.age >= 18 ? <div>成年人</div> : <div>未成年人</div>} </div> ) } } ReactDOM.render(<App />, document.getElementById('app')) </script>
</body>
</html>
複製代碼
在條件渲染中return null的使用
return null就表示後面的代碼都不執行了
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> class App extends React.Component { constructor(props) { super(props) this.state = { age: 18 } } render() { if(this.state.age<18){ return null; } return ( <div> <h3>提示消息</h3> <div>系統已監測你已經成年,能夠玩這款遊戲</div> </div> ) } } ReactDOM.render(<App />, document.getElementById('app')) </script>
</body>
</html>
複製代碼
2.列表渲染
在學習列表渲染以前,這裏一下數組的遍歷方法map():
map()方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。
[].map(function(value, index, array) {
//第一個參數是值
//第二個參數是索引值
//第三個是原始的數組
});
複製代碼
var array1 = [1,4,9,16];
var a=array1.map(v =>v*2);
console.log(a);//2,8,18,32
複製代碼
數組遍歷
人物列表
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> class List extends React.Component{ constructor(props){ super(props) this.state={ list:["張飛","趙雲","馬超","貂蟬"] } } render(){ let content=this.state.list.map((item,index)=>( <li key={index}>{item}</li> )) return ( <div> <h3>人物列表</h3> <ul>{content}</ul> </div> ) } } ReactDOM.render(<List />, document.getElementById('app')) </script>
</body>
</html>
複製代碼
對象遍歷
人物列表
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> class List extends React.Component{ constructor(props){ super(props) this.state={ list:[ { id: 1, name: 'zs', age: 18, gender: '男' }, { id: 2, name: 'ls', age: 19, gender: '男' }, { id: 3, name: 'ww', age: 20, gender: '女' } ] } } render(){ let content=this.state.list.map(item=>( <tr key={item.id}> <td>{item.id}</td> <td>{item.name}</td> <td>{item.age}</td> <td>{item.gender}</td> </tr> )) return ( <div> <h3>人物列表</h3> <table> <tbody>{content}</tbody> </table> </div> ) } } ReactDOM.render(<List />, document.getElementById('app')) </script>
</body>
</html>
複製代碼
評論列表
能夠直接在jsx中使用map函數
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> class Comment extends React.Component { constructor(props) { super(props) // 添加狀態 this.state = { list: [ { id: 1, name: '張三', content: '沙發' }, { id: 2, name: '李四', content: '板凳' }, { id: 3, name: '王五', content: '賣瓜子' }, { id: 4, name: '趙六', content: '今天吃了沒' } ] } } render() { return ( <div> <h1>評論案例</h1> <ul> {this.state.list.map(item => ( <li key={item.id}> <h3> 評論人： {item.name} </h3> <p> 評論內容： {item.content} </p> </li> ))} </ul> </div> ) } } ReactDOM.render(<Comment />, document.getElementById('app')) </script>
</body>
</html>
複製代碼
評論列表
經過多個組件傳值實現
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> // 評論組件 class Comment extends React.Component { constructor(props) { super(props) // 添加狀態 this.state = { list: [ { id: 1, name: '張三', content: '沙發' }, { id: 2, name: '李四', content: '板凳' }, { id: 3, name: '王五', content: '賣瓜子' }, { id: 4, name: '趙六', content: '今天吃了沒' } ] } } render() { return ( <div> <h1>評論案例</h1> <ul> {this.state.list.map(item => ( <Item key={item.id} data={item} /> ))} </ul> </div> ) } } // 評論項組件,沒有狀態，數據是父組件傳遞過來的 function Item(props) { return ( <li> <h3> 評論人： {props.data.name} </h3> <p>評論內容 {props.data.content}</p> </li> ) } ReactDOM.render(<Comment />, document.getElementById('app')) </script>
</body>
</html>
複製代碼
九.表單
react中的表單分爲兩種:受控表單,非受控表單
react操做表單的目的是獲取用戶輸入的內容
1.受控表單
受控表單的基本模型
- 當前組件中的表單受到了react的控制,當表單元素的內容發生了改變,react對應的狀態也要發生改變
- react的狀態發生改變,對應的表單內容也要發生改變
- 相似於vue的雙向數據綁定
- 在表單標籤中綁定一個onChange事件,必定是onChange事件
- 在函數體重傳入e參數,利用
e.target.value來獲取表單元素的值
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> //定義一個類組件 class Hello extends React.Component{ constructor(props){ super(props); this.state={ msg:'你好呀' } } render(){ return ( <div> <p> <input type="text" onChange={this.handleChange}/> </p> <p> {this.state.msg} </p> </div> ) } handleChange=e=>{ this.setState({ msg:e.target.value }) } } //渲染組件 ReactDOM.render( <Hello />,document.getElementById('app') ) </script>
</body>
</html>
複製代碼
受控表單的統一處理模型
從受控表單的基本模型知道,若是要對一個組件中不少的表單標籤作控制也就意味着要寫不少個事件,因此須要封裝一個函數來統一處理
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"></script>
</body>
</html>
複製代碼
2.非受控表單
咱們通常採用受控表單來獲取表單元素的值,也能夠採用非受控表單的形式
要編寫一個非受控組件，而不是爲每一個狀態更新都編寫數據處理函數，你能夠 使用 ref來從 DOM 節點中獲取表單數據。
非受控表單基本模型
- 在構造函數中，須要本身建立一個引用 ref
- 咱們建立的ref與表單元素綁定,咱們建立的ref能夠在任意地方使用
- 經過ref.current.value來獲取值
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> //定義一個類組件 class Form extends React.Component { constructor(props) { super(props) // 1. 建立ref this.usernameRef = React.createRef() this.buttonRef = React.createRef() } render() { return ( <div> {/* 2. 咱們建立的ref能夠 在組件的任意地方使用 */} <input ref={this.usernameRef} type="text" /> <button ref={this.buttonRef} onClick={this.get}> 獲取value值 </button> </div> ) } get = () => { // 手動獲取到DOM的value值 // refs: 用於操做DOM的 // 3. 經過this.usernameRef.current console.log(this.usernameRef.current.value) } } //渲染組件 ReactDOM.render( <Form />,document.getElementById('app') ) </script>
</body>
</html>
複製代碼
3.圖書管理案例
實現圖書的增刪查改
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> //定義一個類組件 class Book extends React.Component { constructor(props) { super(props) this.state = { list: [ { id: 1, name: '紅樓夢', desc: '一堆亂七八糟的破事' }, { id: 2, name: '西遊記', desc: '小時候的經典' }, { id: 3, name: '權威指南', desc: 'js程序員必讀' } ], name: '', desc: '', id: '', index: 3 } } render() { return ( <div className="container"> <div className="form"> 書名： <input type="text" value={this.state.name} onChange={this.handleChange} name="name" /> 描述： <input type="text" value={this.state.desc} onChange={this.handleChange} name="desc" /> <button onClick={this.addBook}>添加</button> </div> <table> <thead> <tr> <th>編號</th> <th>書名</th> <th>描述</th> <th>操做</th> </tr> </thead> <tbody> {this.state.list.map((item, index) => ( <tr key={item.id}> <td>{index + 1}</td> <td>{item.name}</td> <td>{item.desc}</td> <td> <a href="#" onClick={this.delBook.bind(this, item.id)}> 刪除 </a> | <a href="#" onClick={this.showEdit.bind(this, item)}> 修改 </a> </td> </tr> ))} </tbody> </table> </div> ) } addBook = () => { // 判斷是否有id值，若是有，是修改，不然是添加 if (this.state.id) { // 修改 // 根據id找到須要修改的下標 let idx = this.state.list.findIndex(item => item.id === this.state.id) this.state.list[idx].name = this.state.name this.state.list[idx].desc = this.state.desc } else { // 添加 // 添加圖書 this.state.list.push({ id: ++this.state.index, name: this.state.name, desc: this.state.desc }) } // 清空name和desc this.state.name = '' this.state.desc = '' this.state.id = '' this.setState(this.state) } handleChange = e => { let { name, value } = e.target this.setState({ [name]: value }) } delBook(id, e) { e.preventDefault() // 刪除須要id // 根據id獲取到下標 let idx = this.state.list.findIndex(item => item.id === id) // 刪除對應的數據 this.state.list.splice(idx, 1) this.setState(this.state) } showEdit = (book, e) => { e.preventDefault() this.state.id = book.id this.state.name = book.name this.state.desc = book.desc this.setState(this.state) } } ReactDOM.render(<Book />, document.getElementById('app')) </script>
</body>
</html>
複製代碼
十.組件之間的通信
- 在實際的項目中老是會各類組件嵌套使用,可是每一個組件的狀態是私有的,別的組件時不能直接訪問的
- 組件之間的通信主要分爲:父組件向子組件傳值,子組件向父組件傳值
1.父組件傳值給子組件
- 嵌套在別的類中的組件是子組件
- 父組件若向子組件傳值,在引用子組件時就把值傳過去
- 子組件經過props在本身的內部便可接受父組件傳過來的值
- 渲染的父組件
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> //定義一個父組件 class Father extends React.Component{ constructor(props){ super(); this.state={ msg:'你們好呀,我是爸爸' } } render(){ return ( <div> <h3>我是父組件</h3> <Son msg={this.state.msg} name="zhangsan" age="18" /> </div> ) } } //定義一個子組件 class Son extends React.Component{ constructor(props){ super(props); } render(){ return ( <div> <p>{this.props.msg}</p> <p>{this.props.name}</p> <p>{this.props.age}</p> </div> ) } } ReactDOM.render(<Father />, document.getElementById('app')) </script>
</body>
</html>
複製代碼
2.子組件向父組件傳值
-
首先父組件提供一個接收數據的方法
-
子組件嵌套在父組件中
-
子組件提供一個傳數據的方法,在方法體中將props賦值給父組件接收數據的方法,調用父組件接收數據的方法
-
渲染的是父組件
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>react基礎</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"> </script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel"> //定義一個父組件 class Father extends React.Component{ constructor(props){ super(); this.state={ msg:'你們好呀,我是爸爸' } } render(){ return ( <div> <h3>我是父組件</h3> <Son getData={this.getData} /> </div> ) } //提供一個接收數據的方法 getData(msg){ console.log(msg) } } //定義一個子組件 class Son extends React.Component{ constructor(props){ super(props); this.state={ msg:'你們好,我是子組件' } } render(){ return ( <div> <button onClick={this.sendData}>給父組件傳遞數據</button> </div> ) } sendData=()=>{ //給父組件傳遞數據 let {getData}=this.props getData(this.state.msg) } } ReactDOM.render(<Father />, document.getElementById('app')) </script>
</body>
</html>
複製代碼
相關文章
- 1. 《React基礎》React-Redux
- 2. React+d3（基礎）
- 3. react 基礎
- 4. React基礎
- 5. React基礎一
- 6. React-Router基礎（）
- 7. react基礎（1）
- 8. react 基礎篇
- 9. react基礎（2）
- 10. React-redux基礎
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（二）基本類型
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 《React基礎》React-Redux
- 2. React+d3（基礎）
- 3. react 基礎
- 4. React基礎
- 5. React基礎一
- 6. React-Router基礎（）
- 7. react基礎（1）
- 8. react 基礎篇
- 9. react基礎（2）
- 10. React-redux基礎