第七章 react-ui
最流行的开源React UI组件库
material-ui(国外)
ant-design(国内蚂蚁金服)
实现按需打包(组件js/css)
- 下载依赖包
cnpm install react-app-rewired customize-cra babel-plugin-import --save-dev
-
修改默认配置
- 找到package.json
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test --env=jsdom", "eject": "react-scripts eject" },
- 创建config-overrides.js
const {override, fixBabelImports} = require('customize-cra'); module.exports = override( fixBabelImports('import', { libraryName: 'antd-mobile', style: 'css', }), );
- 编码规则
// import 'antd-mobile/dist/antd-mobile.css' // import Button from 'antd-mobile/lib/button' // import Toast from 'antd-mobile/lib/toast' import {Button, Toast} from 'antd-mobile'
第八章 redux
理解
文档
redux是什么
-
redux是一个独立专门用于做状态管理的JS库(不是react插件库)
-
它可以用在react, angular, vue等项目中, 但基本与react配合使用
-
作用: 集中式管理react应用中多个组件共享的状态
redux工作流程
什么情况下需要使用redux
-
总体原则: 能不用就不用, 如果不用比较吃力才考虑使用
-
某个组件的状态,需要共享
-
某个状态需要在任何地方都可以拿到
-
一个组件需要改变全局状态
-
一个组件需要改变另一个组件的状态
redux的核心API
createStore()
- 作用
- 创建包含指定reducer的store对象
- 编码
import {createStore} from 'redux'
import counter from './reducers/counter'
const store = createStore(counter
store对象
-
作用
- redux库最核心的管理对象
-
它内部维护着
-
state
-
reducer
-
-
核心方法
-
getState()
-
dispatch(action)
-
subscribe(listener)
-
-
编码
store.getState()
store.dispatch({type:'INCREMENT', number})
store.subscribe(render)
applyMiddleware()
- 作用
- 应用上基于redux的中间件(插件库)
- 编码
import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk' // redux异步中间件
const store = createStore(
counter,
applyMiddleware(thunk) // 应用上异步中间件
)
combineReducers()
- 作用
- 合并多个reducer函数
- 编码
export default combineReducers({
user,
chatUser,
chat
})
三个核心概念
action
-
标识要执行行为的对象
-
包含2个方面的属性
-
type: 标识属性, 值为字符串, 唯一, 必要属性
-
xxx: 数据属性, 值类型任意, 可选属性
-
-
例子
const action = {
type: 'INCREMENT',
data: 2
}
- Action Creator(创建Action的工厂函数)
const increment = (number) => ({type: 'INCREMENT', data: number})
reducer
-
根据老的state和action, 产生新的state的纯函数
-
样例
export default function counter(state = 0, action) {
switch (action.type) {
case 'INCREMENT':
return state + action.data
case 'DECREMENT':
return state - action.data
default:
return state
}
}
-
注意
-
返回一个新的状态
-
不要修改原来的状态
-
store
-
将state,action与reducer联系在一起的对象
-
如何得到此对象?
import {createStore} from 'redux'
import reducer from './reducers'
const store = createStore(reducer)
- 此对象的功能?
- getState(): 得到state
- dispatch(action): 分发action, 触发reducer调用, 产生新的state
- subscribe(listener): 注册监听, 当产生了新的state时, 自动调用
react-redux
理解
-
一个react插件库
-
专门用来简化react应用中使用redux
React-Redux将所有组件分成两大类
-
UI组件
-
只负责 UI 的呈现,不带有任何业务逻辑
-
通过props接收数据(一般数据和函数)
-
不使用任何 Redux 的 API
一般保存在components文件夹下
-
-
容器组件
-
负责管理数据和业务逻辑,不负责UI的呈现
-
使用 Redux 的 API
-
一般保存在containers文件夹下
-
相关API
- Provider
//让所有组件都可以得到state数据
<Provider store={store}>
<App />
</Provider>
- connect()
// 用于包装 UI 组件生成容器组件
import { connect } from 'react-redux'
connect(
mapStateToprops,
mapDispatchToProps
)(Counter)
- mapStateToprops()
//将外部的数据(即state对象)转换为UI组件的标签属性
const mapStateToprops = function (state) {
return {
value: state
}
}
- mapDispatchToProps()
- 将分发action的函数转换为UI组件的标签属性
- 简洁语法可以直接指定为actions对象或包含多个action方法的对象
使用上redux调试工具
安装chrome浏览器插件
下载工具依赖包
npm install --save-dev redux-devtools-extension
编码
import { composeWithDevTools } from 'redux-devtools-extension'
const store = createStore(
counter,
composeWithDevTools(applyMiddleware(thunk))
)