React再學習 第二天
Day2
-React基礎
+組件化
-TodoMVC
+Vue Angular
*支持直接管理DOM模板
*虛擬DOM
+拆分成組件
*利用組件通信來讓他們協同交互
+MVVM:數據驅動視圖
+列表渲染
+樣式處理
+條件
+數據綁定
+組件
*props
*單項數據流
+表單控件的處理
*沒有雙向數據綁定
*必須自己手動來處理表單數據問題
yarn init –y
yarn add react react-dom @babel/standalone
01開發環境
<!DOCTYPE html>
<html lang="en">
<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>
<!--
@babel/standalone 的作用是可以在瀏覽器中調用babel的api完成ES6-ES5的轉換
@babel/standalone 是一個獨立的編譯工具，支持調用它的API完成ES6到ES5的轉換
-->
</body>
<script src="node_modules/@babel/standalone/babel.js"></script>
調用API編譯執行:
<script>
//調用Babel提供的轉換API完成編譯轉換，得到結果字符串
//編譯過程比較耗時，所以只推薦開發測試使用
//咱們這裏使用它的目的是為了簡化學習過程
var input = ‘const getMessage = () => "Hello World";‘;
var output = Babel.transform(input, { presets: [‘es2015‘] }).code;
console.log(output);
</script>
自動編譯執行:
<script type="text/babel">
// text/babel以後babel會去編譯它
const getMessage = () => "Hello World";
console.log(getMessage);
console.log(getMessage())
</script>
</html>
02 hello world
<!DOCTYPE html>
<html lang="en">
<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>
</body>
<script src=‘node_modules/@babel/standalone/babel.js‘></script>
<script src=‘node_modules/react/umd/react.development.js‘></script>
<script src=‘node_modules/react-dom/umd/react-dom.development.js‘></script>
<!-- React的核心理念就是:組件化，不支持管理DOM模板，它必須把所有的模板都放到組件中 -->
<script type="text/babel">
//下面這句話的作用就是將一個h1標簽渲染到指定的頁面入口中
ReactDOM.render(<h1>Hello,react!</h1>,document.getElementById(‘app‘));
</script>
</html>
03 jsx基本語法
·非模塊化環境
·babel-standalone
·執行時編譯，速度比較慢
·模塊化環境
·結合webpack配置babel響應的工具完成預編譯
·瀏覽器執行的是預編譯結果
·Babel REPL賦值查看編譯結果
·使用在線測試
JSX基本語法:
1.只能有一個根節點
2.
04 在jsx中綁定js表達式以及jsx註釋
{ /* */ }
05 在 js語法中使用jsx標簽
06.jsx屬性綁定
class要寫成className
label中的for要攜程htmlFor
jsx單標簽必須結束
(比如input標簽必須要以/結尾)
07.jsx語法高亮
·必須有且只有一個根節點
JSX編譯成React.createElement..
checked要寫成 defaultChecked
value 要寫成defaultValue
08.列表渲染
var arr = [<li key=’1’>a</li>,<li key=’2’>b</li>]
{arr}
09.事件綁定處理
onClick = { ()=>{ } }
10.組件介紹
這樣也能顯示header，實現了復用，但是這不叫組件，這只是一個普通變量，沒有狀態，
組件有狀態和生命周期。
·函數式組件(無狀態)
function (props)
{
return jsx…
}
·類組件(有狀態)
class a extends React.Component{
constructor(){
super()
}
render(){
return jsx..
}
}
使用this.setState來修改狀態
11.class基本語法
實例方法
靜態方法
實例屬性
靜態屬性
12.class的繼承
extends
13.最基本的類方式定義的組件
class本質就是ES5prototype實現繼承的語法糖
14.組件的狀態
15.-事件綁定中的this問題
}
拿到事件源
通過參數e/event
onClick = { (e)=>{console.log(e.target)} }
第一種方式:
第二種方式:
第三種方式:
16.再次強調事件綁定中this的坑
第一種綁定方式
onClick = {this.handleClick}
·this指向Window
·默認接收一個參數 event 事件源對象
·不支持額外的參數傳遞
第二種方式(bind)
·this指向組件實例
·默認接收一個參數 event
onClick = {this.handleClick.bind(this)}
第二種參數還可以為方法傳遞額外參數，
·手動傳遞的參數會放到參數的最前面, event 會作為函數的最後一個參數
onClick = {this.handleClick.bind(this,123,456)}
第三種方式
·不存在this的問題
·手動傳遞參數
·參數順序自己制定，event也需要自己手動傳遞
onClick = {(e)=>{this.handleclick(e,123,456)}}
17.-TodoMVC
18-TodoMVC-把模板中的規則修改為React的方式
/*
class className
單標簽必須結束
autofocus autoFocus
註釋
checked defaultChecked
value defaultValue
*/
19.-TodoMVC-列表展示
20-添加任務
21-總結
babel-standalone
jsx語法
jsx屬性綁定
React 列表渲染和條件渲染
組件
函數式組件
功能簡單，沒有狀態，只適合封裝視圖
class組件
功能最完整，支持狀態及生命周期等特性
組件的狀態
定義
使用
修改
es6 class 的定義方式及繼承方式
事件函數綁定內部this的問題
不做任何處理的綁定
bind
箭頭函數
React再學習 第二天