React生命周期函數(shù)分為四部分
一 、初始化數(shù)據(jù)
二 、掛載頁面 ——??Mounting?
（1）componentWillMount ——? 即將開始掛載頁面
（2）render ——? 渲染組件掛載到頁面
（3）componentDidMount ——? 掛載完成
三 、更新組件 —— Updation
1、props 父組件傳給子組件的數(shù)據(jù)改變時更新
（1）componentWillReceiveProps —— 子組件接收props數(shù)據(jù)時執(zhí)行
（2）shouldComponentUpdate?
????????更新前執(zhí)行（主要為了詢問是否需要更新頁面） 會返回true/false，為true時繼續(xù)執(zhí)行下面的更新函數(shù)，當數(shù)據(jù)修改但并不影響頁面，不需要重新渲染時，設置返回false，就不用執(zhí)行下面的更新函數(shù)，提高性能
（3）componentWillUpdate —— 即將更新組件
（4）render —— 渲染組件掛載到頁面
（5）componentDidUpdate —— 組件更新完成
四、卸載組件 —— Unmounting
（1）componentWillUnmount? ——? 卸載前執(zhí)行
新的生命周期函數(shù)????????官方文檔
axios發(fā)送ajax請求
安裝
npm install axios --save
項目引用
import axios from 'axios';
使用：axios返回一個promise對象，記錄請求過程，判斷結果成功還是失敗，成功時調(diào)用.then方法輸出拿到的數(shù)據(jù)
----------//發(fā)ajax請求最好的方式是寫在componentDidMount
componentDidMount(){
????????const promise = axios.get('http://www/dell-lee.com/react/api/demo.json');
????????promise.then((res)=>{console.log(res.data)});//data - success -true
}?
react-router 路由
安裝
npm install react-router-dom --save
引用
import?{?BrowserRouter,?Route, Link }?from?'react-router-dom';
BrowserRouter? ===>>? 定義一個路由(只能有一個子元素)? ? ? ? Route? ===>>? ? 路由項? ? ? ?Link（使用to屬性跳轉(zhuǎn)）? ? ?===>>? ? 跳轉(zhuǎn)標簽
實現(xiàn)跳轉(zhuǎn)頁面時傳遞參數(shù)
1、可以直接在路徑后面加‘？’，然后寫上參數(shù)（如to='/list?a=123'），但是這種方法獲取參數(shù)比較麻煩；
2、也可以使用如下形式
（1）直接在跳轉(zhuǎn)的路徑后面加上一個‘/’，然后在后面寫參數(shù)：(一般用在，點擊對應鏈接跳轉(zhuǎn)到對應頁面詳情，點擊時傳遞這個頁面的ID，List頁面根據(jù)ID渲染對應頁面詳情)
<Link to="/list/123">
<Button type="primary">按鈕</Button>
</Link>
（2）想要接收到參數(shù)，可以在index.js中的路由進行如下配置：
<Route path="/list/:id" component={NewList} />
path="/list/:id" 的意思是：跳轉(zhuǎn)到list頁面時，如果后面還有東西，如list/123，會和list/:id相匹配，123存放在變量id中
3、之后在路由list組件的render中，使用如下代碼即可打印出接收到的參數(shù)：
console.log(this.props.match.params.id); ?
路由中的Switch轉(zhuǎn)換器
Switch：匹配到一個就不會匹配了
因為當前地址只要和路由項沒有不同的，就會匹配上，導致匹配到不想顯示的頁面
例子① 根路徑' / '和路由項' /detail '沒有不同的地方，所以根路徑會匹配顯示到detail頁面，如果使用了Switch，' / '和' /detail '是不一樣的，就不會匹配；如果路由項順序是' / '在前，' /detail '在后，那就算當前地址是detail，也會先和' / '匹配上，從而顯示錯頁面，這時就需要把路由項順序調(diào)換一下，' /detail '在前(一般都把路由長的放前面)
例子② 如果當前路徑是' /a '那就和' /detail '匹配不上，所以最好使用Switch標簽以防萬一。
解決方法：使用Switch標簽
（1）引用Switch：import { Switch } from "react-router-dom";
（2）用Switch標簽包裹住Route路由項，然后把' / '和‘ /detail’轉(zhuǎn)換下位置，detail在前
如果路徑是根路徑' / '，路由項第一個是detail，Switch匹配不上，就去匹配第二個；
如果路徑是' /detail '，第一項能匹配上
【所以應該把想要訪問的名字長的組件的路由放在上面，以防該組件的路徑包含其他組件的路徑導致顯示的是其他組件的內(nèi)容】
Ant Design樣式組件庫????官方文檔
安裝
npm install antd --save
項目引用
import 'antd/dist/antd.css'? ?（直接在index.js入口文件中引用，所有組件就能直接使用）
使用
參考文檔
