axios
安装:npm add axios
导入axios
import axios from "axios"; axios.get("https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312") .then((res)=>{ var data = res.data.data console.log(data) console.log(data.replies) },(error)=>{ console.log('失败了') }) fetch('https://cnodejs.org/api/v1/topics').then(res=>res.json()) .then(res=>{ console.log(res.data,'fetch') }).catch(err=>{ console.log('失败了') })
ant-design(国内蚂蚁金服)
官网: https://ant.design/index-cn 安装:npm install antd --save antd基本使用(例如在app.js里面使用):
步骤
1. 导入antd组件--Button import {Button} from "antd"; 2. 导入antd的css样式 import "antd/dist/antd.css"; <Button type="primary">我是antd里提供的按钮</Button> <br/>
Redux
redux 中文文档: http://www.redux.org.cn/
安装 npm install redux
在一个应用中,所有的 state 都是以一个对象树的形式存在一个单一的 store 中, 唯一改变 state 的办法就是触发 action, 而 reducer 就是用来编写专门的函数决定每个 action 如何改变应用的 state 。 reducer的作用是接受旧的 state 和 action, 返回新的 state (previousState, action) => newState
<!-- 引入createStore,作用就是专门用于创建redux中最为核心的store对象 -->
把这个过程比拟成图书馆的一个流程来帮助理解。
-
Action Creator(具体借书的表达) 想借书的人向图书馆管理员说明要借的书的那句话。【比如说我要借天龙八部这本书】
-
Store(图书馆管理员) 负责整个图书馆的管理。是Redux的核心
-
Reducers(图书馆管理员的小本本) 管理员需要借助Reducer(图书馆管理员的小本本)来记录。
-
React Component(借书的人) 需要借书的人
组件想要获取State, 用ActionCreator创建了一个请求交给Store, Store借助Reducer确认了该State的状态 ,Reducer返回给Store一个结果,Store再把这个 State 转给组件 。
三个核心概念
1、action
1. 动作的对象 a. 本质就是一个Object类型的对象,而Action Creators就是专门用来创建Action了,当然了,我们也可以不使用Action Creators创建Action,完全可以自己去定义个Action对象,就是一个对象【{}】,只要里面包含type和data就可以了。 b. action的值其实有两种情况: 一是值是一个普通的一般的对象{},那么这种action就是同步Action 二是值是一个函数,那么这种action就是异步action 2. 包含2个属性 type:标识属性, 值为字符串, 唯一, 必要属性 data:数据属性, 值类型任意, 可选属性 3. 例子: { type: 'ADD_STUDENT',data:{name: 'tom',age:18} }
2、reducer
1. 用于初始化状态、加工状态。 2. 加工时,根据旧的state和action, 产生新的state的纯函数。 3. 每个组件都应该有自己的reducer,比如说有个组件A,那么组件A想把自己的状态交给redux,那么就需要为组件A构建一个reducer,同理,如果有B组件,也要为B组件构建一个redux。
3、store
1. 整个应该只会有一个,将state、action、reducer联系在一起的对象 2. 如何得到此对象? 1)import {createStore} from 'redux' 2)import reducer from './reducers' 3)const store = createStore(reducer) 3.此对象的功能? 1)getState(): 得到state 2)dispatch(action): 分发action, 触发reducer调用, 产生新的state 3)subscribe(listener): 注册监听, 当产生了新的state时, 自动调用