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

最新推荐文章于 2024-05-28 16:35:38 发布

心湖中的石子

最新推荐文章于 2024-05-28 16:35:38 发布

阅读量596

点赞数

分类专栏： React 文章标签： react.js ui javascript

本文链接：https://blog.csdn.net/weixin_43745804/article/details/121136440

版权

React 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

1、antd的基本使用

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

官网: http://www.material-ui.com/#/
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>
    )
  }
}

2、推荐几款ui库

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

3、redux-redux是什么

redux是一个专门用于做状态管理的JS库(不是react插件库)。
它可以用在react, angular, vue等项目中, 但基本与react配合使用。
作用: 集中式管理react应用中多个组件共享的状态。
有点类似于消息中心

4、redux-什么情况下使用redux

某个组件的状态，需要让其他组件可以随时拿到（共享）。
一个组件需要改变另一个组件的状态（通信）。
总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

5、redux的工作流程

在这里插入图片描述

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

1、action

动作的对象
包含2个属性
 type：标识属性, 值为字符串, 唯一, 必要属性
 data：数据属性, 值类型任意, 可选属性
例子：{ 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)

此对象的功能?

getState(): 得到state
dispatch(action): 分发action, 触发reducer调用, 产生新的state
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

8、简化版redux

安装redux

npm i redux --save

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)

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

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

由于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

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')
  )
})

在这里插入图片描述

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

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

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

3. 核心方法:

getState()
dispatch(action)
subscribe(listener)

4. 具体编码:

store.getState()
store.dispatch({type:‘INCREMENT’, number})
store.subscribe(render)

10、完整版的计算器

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

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

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
}

4、store.js

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

//暴露store
export default createStore(countReducer)

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

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

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')
  )
})

8、app.js

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

export default class App extends Component {

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

11、异步action

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

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

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

npm i redux-thunk --save

上例需要做如下修改：
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
}

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))

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

在这里插入图片描述

心湖中的石子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react（尚硅谷）07-antd的基本使用，推荐几款ui库、redux概念、场景、工作流程，redux的三大核心概念-action、reducer、store,计算器案例，异步action

1、antd的基本使用现在已经有了antd of react流行的开源React UI组件库material-ui(国外)官网: http://www.material-ui.com/#/github: https://github.com/callemall/material-uiant-design(国内蚂蚁金服)3. 官网: https://ant.design/index-cn4. Github: https://github.com/ant-design/ant-design/
复制链接

扫一扫