React學習筆記之react基礎篇（1）
一.React特點歸納
1.聲明式的視圖層：React 模板寫在 JS 文件中，而不是 html 的 <script> 標簽中。能使用所有 JS 語法，而不只有模板語法，所以更加靈活。
2.簡單的更新流程：當狀態數據發生變化時，React也會根據最新的狀態渲染出最新的UI。
3.靈活的渲染實現：React並不是把視圖直接渲染成最終的終端界面，而是先把它們渲染成虛擬DOM。
4.高效的DOM操作：我們可以直接操作javascript對象取代一個真實的DOM節點。
二.ES6語法簡介
因為React項目一般都是用ES6語法來寫的，所以ES6語法的學習是十分有必要的。
1.var丶let丶const
var是ES5聲明的變量，let是ES6聲明的變量，const聲明一個只讀的常量，一旦聲明，常量的值就不能改變
2.箭頭函數
ES6允許使用“箭頭”（=>）定義函數，該方式不需要function關鍵字和return關鍵字，同時箭頭函數中的this指向函數定義時的上下文對象，而不是函數執行時的上下文對象。
例如：
var f=a=>a+1; //等價於 var f =function(a){ return a+1; } function foo(){ this.bar=1; this.f= (a) => a+this.bar; } //等價於 function foo(){ this.bar=1; this.f=(function(a){ return a+this.bar }).bind(this); }
//如果函數體內包含的語句多於一條，就需要用大括號將函數體括起來，使用return返回
例如：
var f =(x,y) => {
x++;
y--;
return x+y;
}
3.模板字符串
模板字符串是增強版的字符串，用反引號（ ‘ )表示字符串
例如：
//普通字符串
‘FeiYuMoFan!‘
//多行字符串
‘React is wonderful !
React is beautiful ! ‘
//字符串中嵌入變量
var name = "WXF";
‘Hello , ${name} !‘;
4.解構賦值
ES6允許按照一定模式從數組和對象中提取值，對變量進行賦值，這被稱之為解構。
例如：
//數組解構 let [a,b,c] = [1,2,3]; //對象解構 let name = ‘WXF‘; let age = 4; let person = {name,age}; //對象解構另外一種形式 let person ={name:‘WXF‘ , age:4}; let {name,age} =person; //函數的參數解構 function sum ([x,y]){ return x+y; } sum([1,2]); //3 //對象參數解構 function sum({x,y}) { return x+y; } sum({x:1,y:2}); //嵌套解構的數組解構 let [a,[b],c] =[1,[2],3]; //嵌套結構的對象解構 let {person: {name,age},foo} ={person:{name:‘WXF‘,age:4},foo:‘foo‘};
5.rest參數
ES6引入rest參數（形式為...變量名）用於獲取函數的多余參數。
例如：
function input(one,...two){
console.log(two)
}
input(‘one‘,‘two‘,‘three‘); //[‘two‘,‘three‘]
6.擴展運算符
擴展運算符是三個點（...)，它將一個數組轉化為用逗號分隔的參數序列，類似於rest參數的逆運算。
例如：
function sum(a,b,c){
return a+b+c;
}
let numbers = [1,2,3]
sum(...numbers) //將數組轉換成參數序列進行輸入
//合並數組
let arr1 = [1];
let arr2 = [2];
let arr4 = [3];
[...arr1,...arr2,...arr3]; [1,2,3]
//與解構賦值結合
let [a,...rest] =[1,2,3]
rest //[2,3]
7.class
ES6中引用了class(類)這個概念
//定義一個類
class Person{
constructor(name,age) { //可參照java中的構造方法
this.name =name;
this.age =age;
}
getName(){
return this.name;
}
getAge(){
return this.age;
}
}
//創建對象
let person = new(‘WXF‘,4);
三.JSX語法簡介
JSX是一種用於描述UI的JavaScript擴展語法，React使用這種語法描述組件的UI.
1.JSX簡單運用
ReactDOM.render(
<div>
<h1>React</h1>
<h2>歡迎學習 React</h2>
<p data-myattribute = "somevalue">這是一個很不錯的 JavaScript 庫!</p>
</div> ,
document.getElementById(‘example‘) //將該組件渲染到example節點上去
);
2.JavaScript表達式
我們可以在 JSX 中使用 JavaScript 表達式。表達式寫在花括號 {} 中。實例如下：
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>,
document.getElementById(‘example‘)
);
在 JSX 中不能使用 if else 語句，但可以使用 conditional (三元運算) 表達式來替代。以下實例中如果變量 i 等於 1 瀏覽器將輸出 true, 如果修改 i 的值，則會輸出 false.
ReactDOM.render(
<div>
<h1>{i == 1 ? ‘True!‘ : ‘False‘}</h1>
</div>,
document.getElementById(‘example‘)
);
3.註釋
註釋需要寫在花括號中，實例如下：
ReactDOM.render(
<div>
<h1>菜鳥教程</h1>
{/*註釋...*/}
</div>,
document.getElementById(‘example‘)
);
4.數組
JSX 允許在模板中插入數組，數組會自動展開所有成員：
var arr = [
<h1>React</h1>,
<h2>三大主流框架之一</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById(‘example‘)
);
四.React組件
1.組件的定義
import React,{Component} from "react";
class Demo extends Component { //定義了Demo組件
render(){ //定義了render（）方法
return{
<div>
<ul>
測試代碼
</ul>
</div>
}
export default Demo; //將Demo作為默認模塊導出，從而在其他頁面中可以進行組件的調用
2.組件的props(組件的屬性）
組件的props用於在我們使用一個組件（父組件）調用另外一個組件（子組件）的時候，把父組件中的數據通過props（一個對象）傳遞給子組件，供子組件使用。
示例（函數組件）：
function HelloMessage(props) { //子組件HelloMessage,使用ES5中的function進行定義
return <h1>Hello {props.name}!</h1>;
}
const element = <HelloMessage name="Runoob"/>; //父組件element，同時通過props傳入數據name
ReactDOM.render(
element,
document.getElementById(‘example‘)
);
讓我們再來看一個更加完善的使用方法：
首先我們創建一個子組件PostItem
class PostItem extends Component{
render(){
const{title,author,date}= this.props; //通過props接收父組件傳過來的數據
return(
<div>
<li>{title}</li> //將數據在頁面中進行顯示
<li>{author}</li>
<li>{date}</li>
</div>
);
}
}
export default PostItem;
接下來我們來創建一個父組件PostList向子組件PostItem傳遞數據同時進行子組件的調用
//定義常量來存儲我們需要傳遞的數據
const data = [
{title:1,author:1,date:1},
{title:2,author:2,date:2},
{title:3,author:3,date:3},
];
class PostList extend Component{
render(){
return(
<div>
{data.map(item=> //data調用map函數對數據進行循環操作
<PostItem //調用子組件同時通過props傳遞數據
title={item.title}
author={item.author}
date={item.date}
/>
</div>
);
}
}
3.組件的state
組件的state是組件內部的狀態，state的變化最終將反映到組件UI的變化上。
示例：
class Clock extends React.Component {
constructor(props) { //通過constructor函數初始化組件狀態
super(props);
this.state = {date: new Date()}; //通過this.state定義了組件的狀態
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>現在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById(‘example‘)
);
* 有狀態組件和無狀態組件
上述組件因為涉及到了狀態的變化，所以我們可以把它看成有狀態組件，那什麽是無狀態組件呢？我們來看一下下面這個示例
function HelloMessage(props) { //子組件HelloMessage,使用ES5中的function進行定義
return <h1>Hello {props.name}!</h1>;
}
這也就是無狀態組件了，我們也可以稱之為函數組件
在我們開發React應用時，一定要先認真的思考哪些組件應該設計成有狀態組件，哪些組件應該設計成無狀態組件。並且，應該盡可能多的使用無狀態組件，無狀態組件不用關心狀態的變化，只聚焦於UI的展示，因此更容易被復用。
4.組件的事件處理
簡單的事件處理函數
<button onClick={activateLasers}>
激活按鈕
</button>
當我們使用 ES6 class 語法來定義一個組件的時候，事件處理器會成為類的一個方法。例如，下面的 Toggle 組件渲染一個讓用戶切換開關狀態的按鈕：
class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// 這邊綁定是必要的，這樣 `this` 才能在回調函數中使用
this.handleClick = this.handleClick.bind(this); //將當前類的this綁定到對應的函數上
}
handleClick() {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? ‘ON‘ : ‘OFF‘}
</button>
);
}
}
ReactDOM.render( //將組件渲染到example節點上
<Toggle />,
document.getElementById(‘example‘)
);
React學習筆記之react基礎篇（1）