最近需要學(xué)到react，這里進行一個快速的入門，參考react官網(wǎng)

1.創(chuàng)建和嵌套組件

react的組件封裝是個思想，我這里快速演示代碼，自己本身也不太熟悉。
代碼的路徑是src底下的App.js

function MyButton() {return (<button>I'm a Yeapt's Button</button>);
}function MyApp() {return (<div className={"myApp"}><h1>hello</h1><MyButton/></div>);
}export default MyApp;

小結(jié)：這里我對他的理解就是封裝一個自定義的按鈕，然后在使用的時候包在div里面。

2.使用 JSX 編寫標(biāo)簽

剛剛那種包裹式的標(biāo)簽語法被稱為JSX，這個必須閉合標(biāo)簽，也不能return多個jsx標(biāo)簽，必須在貢獻的父級中，比如 div 或者 空標(biāo)簽包裹

<div></div>
<></>

小結(jié)：算是一個對規(guī)范的要求，官網(wǎng)很貼心，說：有大量的 HTML 需要移植到 JSX 中，就用在線轉(zhuǎn)換器。

3.添加樣式

react設(shè)計到樣式的修改跟css類似，也是搞個className，然后創(chuàng)建個css樣式文件區(qū)操作。

我這里試著把按鈕改成藍色，直接創(chuàng)建一個css文件夾，然后在里面寫樣式，最后引入

import './css/myButton.css';function MyButton() {return (<button className={"myButton"}>I'm a button</button>);
}function MyApp() {return (<div className={"myApp"}><h1>hello</h1><MyButton/></div>);
}export default MyApp;

/* In your CSS */
.myButton {background: cornflowerblue;
}

小結(jié)：目前來看很簡單學(xué)過css的都會，不知道后續(xù)有沒有別的引入方式，link應(yīng)該也是可以的。

4.顯示數(shù)據(jù)

就是一個變量傳遞，創(chuàng)建對象，顯示對象數(shù)據(jù)，直接上代碼。

const user = {name: 'new_baby',imgUrl: 'https://www.baidu.com/img/baidu_sylogo1.gif',imgSize: 90,}function MyButton() {return (<button className={"myButton"}>I'm a button</button>);
}function MyApp() {return (<div className={"myApp"}><h1>hello {user.name}</h1><img src={user.imgUrl} sizes={user.imgSize}/><br/><MyButton/></div>);
}export default MyApp;

小結(jié)：其實就是通過對象去賦值，這種寫法更加靈活，涉及前后端交互的時候，數(shù)據(jù)由后端獲取往前端賦值。

5.條件渲染

其實就是if的用法，react沒有像vue那樣有v-if，但是寫法都類似。官網(wǎng)提供了三種表現(xiàn)形式，這里簡單展示：

IF語句引入JSX

function MyApp() {let LoginStatus = true;if (LoginStatus) {return (<div className={"myApp"}><h1>hello {user.name}</h1><img src={user.imgUrl} sizes={user.imgSize}/><br/><MyButton/></div>);} else {return (<div>請登錄</div>);}
}

下面是兩種判斷下的界面

條件運算符（JSX內(nèi)部）

直接在div里面進行條件運算，工作與JSX內(nèi)部。但是在測試過程中f發(fā)現(xiàn)有個問題，if或else后只能跟一個組件。

function MyApp() {let loginStatus = false;return (<div className={"myApp"}>{loginStatus ? (<MyButton/>) : (<h1>請登錄</h1>)}</div>);
}

邏輯 運算符（內(nèi)部不需要else）

當(dāng)你不需要 else 分支時，可以直接用這個，估計用的比較少。

function MyApp() {let loginStatus = false;return (<div className={"myApp"}>{loginStatus && (<MyButton/>)}</div>);
}

小結(jié)：if的用法，預(yù)計第一種和第二種會用的多一點。第一種好理解，第二種寫法簡便。

6.渲染列表

這里是后臺的重點，一定會用到，就是渲染列表，id作為唯一標(biāo)識是為了方便做特殊處理，搭配if增加點高級玩法。下面直接展示代碼：

const users = [{name: 'Jack', id: 1},{name: 'Hobby', id: 2},{name: 'Tom', id: 3},
]const userItems = users.map(users =><li key={users.id}>{users.name}</li>
);function MyApp() {return (<div className={"myApp"}><ul>{userItems}</ul></div>);
}

改造下定義 userItems

const userItems = users.map(users =><li key={users.id}style={{color:users.isBoy?'black':'red',}}>{users.name}</li>
);

小結(jié)：這里在寫代碼的時候要注意2點：
1.特殊的操作盡可能在組件中即const中完成，不要在return去操作，這樣可以低耦合。
2.主鍵id一定要帶上，即使你只是展示。

6.響應(yīng)事件

簡單說就是一些函數(shù)，比如按鈕的點擊事件，這里簡單示范下：

function MyButton() {function handleClick(){alert('被你點到了');}return (<button onClick={handleClick}>點我</button>);
}

小結(jié)：就注意下事件后面不要加()，并且都是在組件內(nèi)自己完成的。

7.更新界面

先介紹下這個useState()，是改變狀態(tài)的開關(guān)，將狀態(tài)添加到函數(shù)組件需要4個步驟:啟用狀態(tài)、初始化、讀取和更新。

import { useState } from 'react';
function MyButton() {const [count, setCount] = useState(0);function handleClick() {setCount(count + 1)}return (<button className={"myButton"} onClick={handleClick}>點擊了{count}次</button>);
}

小結(jié)：useState是react自帶的屬性后續(xù)需要深入了解Hook，count屬性每個組件都自己管控不會干擾。

8.組件間共享數(shù)據(jù)

兩個組件之間的數(shù)據(jù)同步，感覺有點像消息傳遞，定義局部變量。
官網(wǎng)稱之為：按這種方式傳遞下來的信息被稱作 prop。

這里看看代碼：

function MyButton({count, onClick, user}) {return (<button className={"myButton"} onClick={onClick}>{user}點擊了{count}次</button>);
}function MyApp() {const [count, setCount] = useState(0);function handleClick() {setCount(count + 1)}return (<div className={"myApp"}><MyButton user={'張三'} count={count} onClick={handleClick}/><MyButton user={'李四'} count={count} onClick={handleClick}/></div>);
}export default MyApp;