• React 全栈体系（十二）

    第六章 React UI

    一、流行的开源 React UI 组件库

    1. material-ui(国外)

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

    2. ant-design(国内蚂蚁金服)

    • 官网: https://ant.design/index-cn
    • Github: https://github.com/ant-design/ant-design/
    • 使用：npm install antd

    二、代码

    /* src/index.js */
//引入react核心库
import React from "react";
//引入ReactDOM
import ReactDOM from "react-dom";
//引入App组件
import App from "./App";

//渲染App到页面
ReactDOM.render(<App />, document.getElementById("root"));

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

    antd 的基本使用

    /* src/App.jsx */
import React, { Component } from "react";
import { Button, DatePicker } from "antd";
import {
  WechatOutlined,
  WeiboOutlined,
  SearchOutlined,
} from "@ant-design/icons";
const { RangePicker } = DatePicker;

export default class App extends Component {
  render() {
    return (
      <div>
        App....
        <button>点我</button>
        <Button type="primary">Button1</Button>
        <Button>Button2</Button>
        <Button type="link">Button3</Button>
        <Button type="primary" icon={<SearchOutlined />}>
          Search
        </Button>
        <WechatOutlined />
        <WeiboOutlined />
        <DatePicker />
        <RangePicker />
      </div>
    );
  }
}

    • 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

    请添加图片描述

    第七章 redux

    一、redux 理解

    1. 学习文档

    • 英文文档: https://redux.js.org/
    • 中文文档: http://www.redux.org.cn/
    • Github: https://github.com/reactjs/redux

    2. redux 是什么

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

    3. 什么情况下需要使用 redux

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

    4. redux 工作流程

    请添加图片描述

    二、redux 的三个核心概念

    1. action

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

    2. reducer

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

    3. 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 时, 自动调用

    三、redux 的核心 API

    1. createstore()

    • 作用：创建包含指定 reducer 的 store 对象

    2. store 对象

    • 作用: redux 库最核心的管理对象
    • 它内部维护着:
      • state
      • reducer
    • 核心方法
      • getState()
      • dispatch(action)
      • subscribe(listener)
    • 具体编码
      • store.getState()
      • store.dispatch({type:‘INCREMENT’, number})
      • store.subscribe(render)

    3. applyMiddleware()

    • 作用：应用上基于 redux 的中间件(插件库)

    4. combineReducers()

    • 作用：合并多个 reducer 函数

    四、使用 redux 编写应用

    1. 效果

    请添加图片描述

    2. 纯 react 版

    2.1 App
    /* src/App.jsx */
import React, { Component } from "react";
import Count from "./components/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
    2.2 Count
    /* src/components/Count/index.jsx */
import React, { Component } from "react";

export default class Count extends Component {
  state = { count: 0 };
  //加法
  increment = () => {
    const { value } = this.selectNumber;
    const { count } = this.state;
    this.setState({ count: count + value * 1 });
  };
  //减法
  decrement = () => {
    const { value } = this.selectNumber;
    const { count } = this.state;
    this.setState({ count: count - value * 1 });
  };
  //奇数加
  incrementIfOdd = () => {
    const { value } = this.selectNumber;
    const { count } = this.state;
    if (count % 2 !== 0) {
      this.setState({ count: count + value * 1 });
    }
  };
  //异步加
  incrementAsync = () => {
    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={(c) => (this.selectNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    );
  }
}

    • 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

    3. redux 精简版

    • 安装：npm install redux
    3.1 store
    /* src/redux/store.js */
/**
 * 该文件专门用于暴露一个store对象，整个应用只有一个store对象
 */
//引入createStore，专门用于创建redux中最为核心的store对象
import { createStore } from "redux";
//引入为Count组件服务的reducer
import countReducer from "./count_reducer";
//暴露store
export default createStore(countReducer);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    3.2 count_reducer
    /* src/redux/count_reducer.js */
/**
 * 1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
 * 2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
 */

const initState = 0;
export default function countReducer(preState = initState, action) {
  //从action对象中获取：type、data
  const { type, data } = action;
  //根据type决定如何加工数据
  switch (type) {
    case "increment": //如果是加
      return preState + data;
    case "decrement": //如果是减
      return preState - data;
    default:
      return preState;
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    3.3 Count
    /* src/components/Count/index.jsx */
import React, { Component } from "react";
//引入store，用于获取redux中保存状态
import store from "../../redux/store";

export default class Count extends Component {
  //加法
  increment = () => {
    const { value } = this.selectNumber;
    store.dispatch({ type: "increment", data: value * 1 });
  };
  //减法
  decrement = () => {
    const { value } = this.selectNumber;
    store.dispatch({ type: "decrement", data: value * 1 });
  };
  //奇数加
  incrementIfOdd = () => {
    const { value } = this.selectNumber;
    const count = store.getState();
    if (count % 2 !== 0) {
      store.dispatch({ type: "increment", data: value * 1 });
    }
  };
  //异步加
  incrementAsync = () => {
    const { value } = this.selectNumber;
    setTimeout(() => {
      store.dispatch({ type: "increment", data: value * 1 });
    }, 500);
  };
  render() {
    return (
      <div>
        <h1>当前求和为：{store.getState()}</h1>
        <select ref={(c) => (this.selectNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    );
  }
}

    • 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
    3.4 index
    /* src/index.js */
//引入react核心库
import React from "react";
//引入ReactDOM
import ReactDOM from "react-dom";
//引入App组件
import App from "./App";
import store from "./redux/store";

ReactDOM.render(<App />, document.getElementById("root"));
//渲染App到页面
store.subscribe(() => {
  ReactDOM.render(<App />, document.getElementById("root"));
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    3.5 总结
    (1).去除Count组件自身的状态
(2).src下建立:
		-redux
			-store.js
			-count_reducer.js

(3).store.js：
	1).引入redux中的createStore函数，创建一个store
	2).createStore调用时要传入一个为其服务的reducer
	3).记得暴露store对象

(4).count_reducer.js：
	1).reducer的本质是一个函数，接收：preState,action，返回加工后的状态
	2).reducer有两个作用：初始化状态，加工状态
	3).reducer被第一次调用时，是store自动触发的，
					传递的preState是undefined,
					传递的action是:{type:'@@REDUX/INIT_a.2.b.4}

(5).在index.js中监测store中状态的改变，一旦发生改变重新渲染<App/>
	备注：redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。

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

    4. redux 完整版

    4.1 store
    /* src/redux/store.js */
/**
 * 该文件专门用于暴露一个store对象，整个应用只有一个store对象
 */
//引入createStore，专门用于创建redux中最为核心的store对象
import { createStore } from "redux";
//引入为Count组件服务的reducer
import countReducer from "./count_reducer";
//暴露store
export default createStore(countReducer);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    4.2 constant
    /* src/redux/constant.js */
/**
 * 该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
 */
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    4.3 count_action
    /* src/redux/count_action.js */
/**
 * 该文件专门为Count组件生成action对象
 */
import { INCREMENT, DECREMENT } from "./constant";
export const createIncrementAction = (data) => ({ type: INCREMENT, data });
export const createDecrementAction = (data) => ({ type: DECREMENT, data });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    4.4 count_reducer
    /* src/redux/count_reducer.js */
/**
 * 1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
 * 2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
 */
import {INCREMENT, DECREMENT} from './constant'

const initState = 0;
export default function countReducer(preState = initState, action) {
  //从action对象中获取：type、data
  const { type, data } = action;
  //根据type决定如何加工数据
  switch (type) {
    case INCREMENT: //如果是加
      return preState + data;
    case DECREMENT: //如果是减
      return preState - data;
    default:
      return preState;
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    4.5 Count
    /* src/components/Count/index.jsx */
import React, { Component } from "react";
//引入store，用于获取redux中保存状态
import store from "../../redux/store";
//引入actionCreator，专门用于创建action对象
import {createDecrementAction, createIncrementAction} from '../../redux/count_action'

export default class Count extends Component {
  //加法
  increment = () => {
    const { value } = this.selectNumber;
    store.dispatch(createIncrementAction(value*1));
  };
  //减法
  decrement = () => {
    const { value } = this.selectNumber;
    store.dispatch(createDecrementAction(value*1) );
  };
  //奇数加
  incrementIfOdd = () => {
    const { value } = this.selectNumber;
    const count = store.getState();
    if (count % 2 !== 0) {
      store.dispatch(createIncrementAction(value*1));
    }
  };
  //异步加
  incrementAsync = () => {
    const { value } = this.selectNumber;
    setTimeout(() => {
      store.dispatch(createIncrementAction(value*1));
    }, 500);
  };
  render() {
    return (
      <div>
        <h1>当前求和为：{store.getState()}</h1>
        <select ref={(c) => (this.selectNumber = c)}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        &nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    );
  }
}

    • 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
    4.6 总结
    新增文件：
	1.count_action.js 专门用于创建action对象
	2.constant.js 放置容易写错的type值

    • 1
    • 2
    • 3
  • 相关阅读:
    看着2022年世界杯，我无比怀念98世界杯
    [MAUI程序设计] 用Handler实现自定义跨平台控件
    PwnTheBox 刷题记录crypto篇
    java-php-net-python-在线音乐播放网站.计算机毕业设计程序
    热门资讯：超大规模数字产业生态正在加快构建！
    【web安全】Nodejs原型链污染分析
    DBeaver，一款好用的通用数据库管理器
    个人以及企业用户如何选择合适的阿里云服务器？
    Application Studio 学习笔记（2）
    二进制部署1.23.4版本k8s集群-5-部署Master节点服务
  • 原文地址：https://blog.csdn.net/sgsgkxkx/article/details/133148255