devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

react（尚硅谷）07-antd的基本使用，推荐几款ui库、redux概念、场景、工作流程，redux的三大核心概念-action、reducer、store,计算器案例，异步action_antd作用

作者：IT小白 | 2024-07-11 01:30:47

赞

踩

antd作用
1、antd的基本使用

现在已经有了antd of react
流行的开源React UI组件库
material-ui(国外)

  1. 官网: http://www.material-ui.com/#/
  2. github: https://github.com/callemall/material-ui

ant-design(国内蚂蚁金服)
3. 官网: https://ant.design/index-cn
4. Github: https://github.com/ant-design/ant-design/

安装antd
npm i antd --save

使用antd
需要导入antd包和antd的css样式

import React, { Component } from 'react'
import { Button } from 'antd'
import 'antd/dist/antd.css'

export default class App extends Component {

   render () {
    return (
      <div>
        app...<br/>
        <button>点我</button><br/>
        <Button type="primary">Primary Button</Button>
      </div>
    )
  }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
2、推荐几款ui库

antDesign（antd）：蚂蚁金服
elementUI：饿了么
wantUI：有赞团队

3、redux-redux是什么
  1. redux是一个专门用于做状态管理的JS库(不是react插件库)。
  2. 它可以用在react, angular, vue等项目中, 但基本与react配合使用。
  3. 作用: 集中式管理react应用中多个组件共享的状态。
  4. 有点类似于消息中心
4、redux-什么情况下使用redux
  1. 某个组件的状态，需要让其他组件可以随时拿到（共享）。
  2. 一个组件需要改变另一个组件的状态（通信）。
  3. 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。
5、redux的工作流程

在这里插入图片描述

6、redux的三大核心概念-action、reducer、store

1、action

  1. 动作的对象
  2. 包含2个属性
     type：标识属性, 值为字符串, 唯一, 必要属性
     data：数据属性, 值类型任意, 可选属性
  3. 例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }

2、 reducer
4. 用于初始化状态、加工状态。
5. 加工时，根据旧的state和action， 产生新的state的纯函数。

3、store

  • 将state、action、reducer联系在一起的对象
  • 如何得到此对象?
1)	import {createStore} from 'redux'
2)	import reducer from './reducers'
3)	const store = createStore(reducer)

  • 1
  • 2
  • 3
  • 此对象的功能?
  1. getState(): 得到state
  2. dispatch(action): 分发action, 触发reducer调用, 产生新的state
  3. subscribe(listener): 注册监听, 当产生了新的state时, 自动调用
7、原生react写一个计算器
import React, { Component } from 'react'

class Count extends Component {
  state={
    count:0
  }
  //加法
  increament=()=>{
    //函数体
    const {value}=this.selectNumber
    const {count}=this.state
    this.setState({count:count+value*1})
  }
  //减法
  decreament=()=>{
    //函数体
    const {value}=this.selectNumber
    const {count}=this.state
    this.setState({count:count-value*1})
  }
  //基数在家
  increamentIfOdd=()=>{
    //函数体
    const {value}=this.selectNumber
    const {count}=this.state
    if (count%2===1){
      this.setState({count:count+value*1})
    }
  }
  increamentAsync=()=>{
    //函数体
    const {value}=this.selectNumber
    const {count}=this.state
    setTimeout(()=>{
      this.setState({count:count+value*1})
    },500)
  }
  render () {

    return (
      <div>
        <h1>当前求和为：{this.state.count}</h1>
        <select ref={currentNode=>this.selectNumber=currentNode}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.increament}>+</button>&nbsp;
        <button onClick={this.decreament}>-</button>&nbsp;
        <button onClick={this.increamentIfOdd}>当前求和我技术再加</button>&nbsp;
        <button onClick={this.increamentAsync}>异步+</button>&nbsp;
      </div>
    )
  }
}

export default Count


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
8、简化版redux

安装redux

npm i redux --save

  • 1

1、创建redux目录下的两个js文件，store.js和count_reducer.js
在这里插入图片描述

2、store.js

/*
该文件专门用于暴露一个store对象，整个应用只有一个store对象
 */
//引入createStroe专门创建redux的核心部件
import  {createStore} from 'redux'
//引入为Count服务的reducer
import countReducer from './count_reduce'

//暴露store
export default createStore(countReducer)


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

3、count_reducer.js

/*
  该文件用于创建一个为count组件服务的reducer,reducer本质是一个函数
  reducer函数会接到两个参数，1，之前的状态prestate，2，动作对象action
 */
const initSate=0
//给preState设置了个默认值为0
function countReducer (preState=initSate,action) {
  //从action对象中获取type和data
  const {type,data}=action
  //根据type决定如何加工数据
  switch (type) {
    case 'increment':
      return preState+data
    case 'decrement':
      return preState-data
    default:
      return preState
  }
}

export default countReducer


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

4、上例的count/index.js

import React, { Component } from 'react'
//引入store中保存的状态
import store from '../../redux/store'
class Count extends Component {
  //组件挂载后做的事
  componentDidMount () {
    //检测redux中状态的变化，只要变化就调用render
    store.subscribe(()=>{
      //借助setState来render页面组件
      this.setState({})
    })
  }

  //加法
  increament=()=>{
    //函数体
    const {value}=this.selectNumber
    store.dispatch({type:'increment',data:value*1})
  }
  //减法
  decreament=()=>{
    //函数体
    const {value}=this.selectNumber
    store.dispatch({type:'decrement',data:value*1})
  }
  //奇数在加
  increamentIfOdd=()=>{
    //函数体
    const {value}=this.selectNumber
    const count=store.getState()
    if (count % 2 ===1){
      store.dispatch({type:'increment',data:value*1})
    }
  }
  increamentAsync=()=>{
    //函数体
    const {value}=this.selectNumber
    setTimeout(()=>{
      store.dispatch({type:'increment',data:value*1})
    },500)
  }
  render () {

    return (
      <div>
        <h1>当前求和为：{store.getState()}</h1>
        <select ref={currentNode=>this.selectNumber=currentNode}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.increament}>+</button>&nbsp;
        <button onClick={this.decreament}>-</button>&nbsp;
        <button onClick={this.increamentIfOdd}>当前求和我技术再加</button>&nbsp;
        <button onClick={this.increamentAsync}>异步+</button>&nbsp;
      </div>
    )
  }
}

export default Count


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62

由于store.subscribe刷了有限组件，不如直接在app的index.js里直接刷新渲染的dom
因此修改count/index.js如下

5、上例的count/index.js

import React, { Component } from 'react'
//引入store中保存的状态
import store from '../../redux/store'
class Count extends Component {
  //加法
  increament=()=>{
    //函数体
    const {value}=this.selectNumber
    store.dispatch({type:'increment',data:value*1})
  }
  //减法
  decreament=()=>{
    //函数体
    const {value}=this.selectNumber
    store.dispatch({type:'decrement',data:value*1})
  }
  //奇数在加
  increamentIfOdd=()=>{
    //函数体
    const {value}=this.selectNumber
    const count=store.getState()
    if (count % 2 ===1){
      store.dispatch({type:'increment',data:value*1})
    }
  }
  increamentAsync=()=>{
    //函数体
    const {value}=this.selectNumber
    setTimeout(()=>{
      store.dispatch({type:'increment',data:value*1})
    },500)
  }
  render () {

    return (
      <div>
        <h1>当前求和为：{store.getState()}</h1>
        <select ref={currentNode=>this.selectNumber=currentNode}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.increament}>+</button>&nbsp;
        <button onClick={this.decreament}>-</button>&nbsp;
        <button onClick={this.increamentIfOdd}>当前求和我技术再加</button>&nbsp;
        <button onClick={this.increamentAsync}>异步+</button>&nbsp;
      </div>
    )
  }
}

export default Count


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53

5、app的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import store from './redux/store'
ReactDOM.render(
    <App />,
  document.getElementById('root')
);
store.subscribe(()=>{
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  )
})



  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

在这里插入图片描述

9、上例用过的几个redux的api

1. createstore()
作用：创建包含指定reducer的store对象
2. store对象

  1. 作用: redux库最核心的管理对象
  2. 它内部维护着:
    state
    reducer

3. 核心方法:

  1. getState()
  2. dispatch(action)
  3. subscribe(listener)

4. 具体编码:

  1. store.getState()
  2. store.dispatch({type:‘INCREMENT’, number})
  3. store.subscribe(render)
10、完整版的计算器

1、创建count_action.js和维护常量的constant.js
在这里插入图片描述
2、常量维护constant.js

/*
该模块用于定义action对象中type类型的常量值
 */
export const INCREMENT='increment'
export const DECREMENT='decrement'


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

3、count_action.js

/*
该文件专门为Count组件生成action对象
 */
import {INCREMENT,DECREMENT} from './constant'

function createIncreatmentAciton (data) {
  return {type:INCREMENT,data:data}
}

function createDecreatmentAciton (data) {
  return {type:DECREMENT,data:data}
}

export  {
  createIncreatmentAciton,
  createDecreatmentAciton
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

4、store.js

/*
该文件专门用于暴露一个store对象，整个应用只有一个store对象
 */
//引入createStroe专门创建redux的核心部件
import  {createStore} from 'redux'
//引入为Count服务的reducer
import countReducer from './count_reduce'

//暴露store
export default createStore(countReducer)


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

5、count_reducer.js

/*
  该文件用于创建一个为count组件服务的reducer,reducer本质是一个函数
  reducer函数会接到两个参数，1，之前的状态prestate，2，动作对象action
 */
import {INCREMENT,DECREMENT} from './constant'

const initSate=0
//给preState设置了个默认值为0
function countReducer (preState=initSate,action) {
  //从action对象中获取type和data
  const {type,data}=action
  //根据type决定如何加工数据
  switch (type) {
    case INCREMENT:
      return preState+data
    case DECREMENT:
      return preState-data
    default:
      return preState
  }
}

export default countReducer


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

6、count/index.js

import React, { Component } from 'react'
//引入store中保存的状态
import store from '../../redux/store'
//引入actionCreator，专门用于创建action对象
import {createDecreatmentAciton,createIncreatmentAciton} from '../../redux/count_action'
class Count extends Component {
  //组件挂载后做的事
  // componentDidMount () {
  //   //检测redux中状态的变化，只要变化就调用render
  //   store.subscribe(()=>{
  //     //借助setState来render页面组件
  //     this.setState({})
  //   })
  // }

  //加法
  increament=()=>{
    //函数体
    const {value}=this.selectNumber
    store.dispatch(createIncreatmentAciton(value*1))
  }
  //减法
  decreament=()=>{
    //函数体
    const {value}=this.selectNumber
    store.dispatch(createDecreatmentAciton(value*1))
  }
  //奇数在加
  increamentIfOdd=()=>{
    //函数体
    const {value}=this.selectNumber
    const count=store.getState()
    if (count % 2 ===1){
      store.dispatch(createIncreatmentAciton(value*1))
    }
  }
  increamentAsync=()=>{
    //函数体
    const {value}=this.selectNumber
    setTimeout(()=>{
      store.dispatch(createIncreatmentAciton(value*1))
    },500)
  }
  render () {

    return (
      <div>
        <h1>当前求和为：{store.getState()}</h1>
        <select ref={currentNode=>this.selectNumber=currentNode}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.increament}>+</button>&nbsp;
        <button onClick={this.decreament}>-</button>&nbsp;
        <button onClick={this.increamentIfOdd}>当前求和我技术再加</button>&nbsp;
        <button onClick={this.increamentAsync}>异步+</button>&nbsp;
      </div>
    )
  }
}

export default Count


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64

7、app/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import store from './redux/store'
ReactDOM.render(
    <App />,
  document.getElementById('root')
);
store.subscribe(()=>{
  ReactDOM.render(
    <App />,
    document.getElementById('root')
  )
})



  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

8、app.js

import React, { Component } from 'react'
import Count from './component/Count'

export default class App extends Component {

   render () {
    return (
      <div>
        <Count/>
      </div>
    )
  }
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
11、异步action

异步action需要action里的函数返回的事一个函数，而不是一个对象，这个函数里包含了异步处理代码

function createDecreatmentAsyncAciton (data,time) {
  //异步action需要返回一个函数
  return ()=>{
    setTimeout(()=>{
      //通知redux来处理data
      // store.dispatch({type:INCREMENT,data:data})
      store.dispatch(createIncreatmentAciton(data))
    },time)
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

由于store只接收object对象，而不接受函数，所以需要一个中间件来处理返回的函数，因此需要安装一个中间件redux-thunk

npm i redux-thunk --save

  • 1

上例需要做如下修改：
1、count_action.js

/*
该文件专门为Count组件生成action对象
 */
import {INCREMENT,DECREMENT} from './constant'

function createIncreatmentAciton (data) {
  return {type:INCREMENT,data:data}
}

function createDecreatmentAciton (data) {
  return {type:DECREMENT,data:data}
}

function createDecreatmentAsyncAciton (data,time) {
  //异步action需要返回一个函数
  //异步action中一般都会调用同步action，异步action不是必须要用的
  return (dispatch)=>{
    setTimeout(()=>{
      //通知redux来处理data
      // store.dispatch({type:INCREMENT,data:data})
      dispatch(createIncreatmentAciton(data))
    },time)
  }
}
export  {
  createIncreatmentAciton,
  createDecreatmentAciton,
  createDecreatmentAsyncAciton
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30

2、store.js

/*
该文件专门用于暴露一个store对象，整个应用只有一个store对象
 */
//引入createStroe专门创建redux的核心部件
import  {createStore,applyMiddleware} from 'redux'
//引入为Count服务的reducer
import countReducer from './count_reduce'

//引入redux-thunk用于支持异步action
import thunk from 'redux-thunk'

//暴露store
export default createStore(countReducer,applyMiddleware(thunk))


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

3、count/index.js

import React, { Component } from 'react'
//引入store中保存的状态
import store from '../../redux/store'
//引入actionCreator，专门用于创建action对象
import {
  createDecreatmentAciton,
  createIncreatmentAciton,
  createDecreatmentAsyncAciton
} from '../../redux/count_action'


class Count extends Component {
  //组件挂载后做的事
  // componentDidMount () {
  //   //检测redux中状态的变化，只要变化就调用render
  //   store.subscribe(()=>{
  //     //借助setState来render页面组件
  //     this.setState({})
  //   })
  // }

  //加法
  increament=()=>{
    //函数体
    const {value}=this.selectNumber
    store.dispatch(createIncreatmentAciton(value*1))
  }
  //减法
  decreament=()=>{
    //函数体
    const {value}=this.selectNumber
    store.dispatch(createDecreatmentAciton(value*1))
  }
  //奇数在加
  increamentIfOdd=()=>{
    //函数体
    const {value}=this.selectNumber
    const count=store.getState()
    if (count % 2 ===1){
      store.dispatch(createIncreatmentAciton(value*1))
    }
  }
  increamentAsync=()=>{
    //函数体
    const {value}=this.selectNumber
    store.dispatch(createDecreatmentAsyncAciton(value*1,500))
  }
  render () {

    return (
      <div>
        <h1>当前求和为：{store.getState()}</h1>
        <select ref={currentNode=>this.selectNumber=currentNode}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.increament}>+</button>&nbsp;
        <button onClick={this.decreament}>-</button>&nbsp;
        <button onClick={this.increamentIfOdd}>当前求和我技术再加</button>&nbsp;
        <button onClick={this.increamentAsync}>异步+</button>&nbsp;
      </div>
    )
  }
}

export default Count


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/808339
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号