React：生命周期函数、axios、react-router、Ant Design样式组件库

React生命周期函数分为四部分

一 、初始化数据

二 、挂载页面 ——  Mounting 

（1）componentWillMount ——  即将开始挂载页面

（2）render ——  渲染组件挂载到页面

（3）componentDidMount ——  挂载完成

三 、更新组件 —— Updation

1、props 父组件传给子组件的数据改变时更新

（1）componentWillReceiveProps —— 子组件接收props数据时执行

（2）shouldComponentUpdate 

        更新前执行（主要为了询问是否需要更新页面） 会返回true/false，为true时继续执行下面的更新函数，当数据修改但并不影响页面，不需要重新渲染时，设置返回false，就不用执行下面的更新函数，提高性能

（3）componentWillUpdate —— 即将更新组件

（4）render —— 渲染组件挂载到页面

（5）componentDidUpdate —— 组件更新完成

四、卸载组件 —— Unmounting

（1）componentWillUnmount  ——  卸载前执行

新的生命周期函数        官方文档

---

---

---

axios发送ajax请求

安装

npm install axios --save

项目引用

import axios from 'axios';

使用：axios返回一个promise对象，记录请求过程，判断结果成功还是失败，成功时调用.then方法输出拿到的数据

----------//发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属性跳转）     ===>>    跳转标签

实现跳转页面时传递参数

1、可以直接在路径后面加‘？’，然后写上参数（如to='/list?a=123'），但是这种方法获取参数比较麻烦；

2、也可以使用如下形式

（1）直接在跳转的路径后面加上一个‘/’，然后在后面写参数：(一般用在，点击对应链接跳转到对应页面详情，点击时传递这个页面的ID，List页面根据ID渲染对应页面详情)

按钮

（2）想要接收到参数，可以在index.js中的路由进行如下配置：

path="/list/:id" 的意思是：跳转到list页面时，如果后面还有东西，如list/123，会和list/:id相匹配，123存放在变量id中

3、之后在路由list组件的render中，使用如下代码即可打印出接收到的参数：

console.log(this.props.match.params.id);  

路由中的Switch转换器

Switch：匹配到一个就不会匹配了

因为当前地址只要和路由项没有不同的，就会匹配上，导致匹配到不想显示的页面

例子① 根路径' / '和路由项' /detail '没有不同的地方，所以根路径会匹配显示到detail页面，如果使用了Switch，' / '和' /detail '是不一样的，就不会匹配；如果路由项顺序是' / '在前，' /detail '在后，那就算当前地址是detail，也会先和' / '匹配上，从而显示错页面，这时就需要把路由项顺序调换一下，' /detail '在前(一般都把路由长的放前面)

例子② 如果当前路径是' /a '那就和' /detail '匹配不上，所以最好使用Switch标签以防万一。

解决方法：使用Switch标签

（1）引用Switch：import { Switch } from "react-router-dom";

（2）用Switch标签包裹住Route路由项，然后把' / '和‘ /detail’转换下位置，detail在前

如果路径是根路径' / '，路由项第一个是detail，Switch匹配不上，就去匹配第二个；

如果路径是' /detail '，第一项能匹配上

【所以应该把想要访问的名字长的组件的路由放在上面，以防该组件的路径包含其他组件的路径导致显示的是其他组件的内容】

---

---

---

Ant Design样式组件库    官方文档

安装

npm install antd --save

项目引用

import 'antd/dist/antd.css'   （直接在index.js入口文件中引用，所有组件就能直接使用）

使用

参考文档