[React] 尚硅谷 -- 学习笔记(七)

第七章 react-ui

最流行的开源React UI组件库

material-ui(国外)

官网

GitHub

ant-design(国内蚂蚁金服)

PC官网

GitHub

移动官网

GitHub

 

实现按需打包(组件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

理解

文档

英文文档

中文文档

Github

 

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浏览器插件

谷歌下载redux

下载工具依赖包

npm install --save-dev redux-devtools-extension

编码

import { composeWithDevTools } from 'redux-devtools-extension'

const store = createStore(
    counter,
    composeWithDevTools(applyMiddleware(thunk)) 
)