React 全栈体系（十二）

news2024/11/19 9:36:12

第六章 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"));

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

请添加图片描述

第七章 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>
    );
  }
}
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>
    );
  }
}

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);
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;
  }
}
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>
    );
  }
}
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"));
});
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只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写。

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);
4.2 constant
/* src/redux/constant.js */
/**
 * 该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
 */
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
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 });
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;
  }
}
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>
    );
  }
}
4.6 总结
新增文件：
	1.count_action.js 专门用于创建action对象
	2.constant.js 放置容易写错的type值

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1032185.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

企业虚拟化KVM的三种安装方式（1、完全文本2、模板镜像+配置文件3、gustos图形方式部署安装虚拟机）

企业虚拟化KVM的三种安装方式（1、完全文本2、模板镜像+配置文件3、gustos图形方式部署安装虚拟机）

一、安装完虚拟机后的操作 第一步: 第二步&#xff1a;分配的内存大一下&#xff0c;处理器多些 第三步&#xff1a;打开虚拟化 打开虚拟机、安装KVM 一般企业如果使用kvm虚拟化平台&#xff0c;都会把物理服务器装成Centos的操作系统&#xff0c;然后装上kvm&#xff0c;创建…
阅读更多...
创龙TL6678F开发板: 实现FPGA与DSP之间 SRIO(3.125Gbps, 4x)通信

创龙TL6678F开发板: 实现FPGA与DSP之间 SRIO(3.125Gbps, 4x)通信

创龙TL6678F开发板官方Demo:SRIO_AD9613 实现了FPGA和DSP之间的SRIO通信, SRIO的速率为5Gbps. 在FPGA端, srio_gen_2 模块的参考时钟为 125MHz. 而Demo: udp_10g_echo 实现了10G以太网通信, ten_gig_eth_pcs_pma模块的参考时钟为156.25 MHz. 两者共用一个 cdcm61002, 且两个参考…
阅读更多...
【100天精通Python】Day67：Python可视化_Matplotlib 绘动画，2D、3D 动画 示例+代码

【100天精通Python】Day67：Python可视化_Matplotlib 绘动画，2D、3D 动画 示例+代码

1 绘制2D动画&#xff08;animation&#xff09; Matplotlib是一个Python绘图库&#xff0c;它提供了丰富的绘图功能&#xff0c;包括绘制动画。要绘制动画&#xff0c;Matplotlib提供了FuncAnimation类&#xff0c;允许您创建基于函数的动画。下面是一个详细的Matplotlib动画示…
阅读更多...
服务器时间正常，docker容器日志显示时间少了8小时

服务器时间正常，docker容器日志显示时间少了8小时

问题&#xff1a; 项目中docker部署的项目容器日志时间少了8小时。解决&#xff1a; 在Dockerfile添加下面语句&#xff1a; # 设置时区 ENV TZ"Asia/Shanghai"
阅读更多...
数字人惯性动作捕捉技术服务，激发吉祥物IP创新活力

数字人惯性动作捕捉技术服务，激发吉祥物IP创新活力

近日&#xff0c;2023年成都市全国科普日主场活动启动仪式中&#xff0c;全球首发全国首个科普数字人形象大使“科普熊猫”&#xff0c;在大会活动现场&#xff0c;数字人“科普熊猫”结合惯性动作捕捉技术&#xff0c;与现场主持人、观众进行实时互动交流&#xff0c;以虚实结…
阅读更多...
华为云云耀云服务器L实例评测｜2核2G跑mysql性能测试

华为云云耀云服务器L实例评测｜2核2G跑mysql性能测试

前言 上一次我们介绍了华为云云耀云服务器L实例的基本信息&#xff0c;从购买到特色都做了简要介绍。但是 很多人看到这个配置又产生了迟疑&#xff0c;主要是因为云耀现在提供的全系是2核&#xff0c;性能吃得消吗&#xff1f;今天我们就来做一个性能测试 环境准备 因为我们…
阅读更多...
Unity fbx动画压缩自动化

Unity fbx动画压缩自动化

应用场景&#xff1a;Unity WebGl项目&#xff0c;原先的动画压缩后也有20到30M&#xff0c;导致用户进入网页加载太慢。需求是在不对动画精确度造成影响的前提下&#xff0c;影响尽可能地压缩动画。&#xff08;使用的是Maya导出的人体骨骼动画&#xff0c;在动画压缩方式选择…
阅读更多...
2023华为杯数学建模研赛思路分享——最全版本F题深度解析

2023华为杯数学建模研赛思路分享——最全版本F题深度解析

题目回顾&#xff1a; 强对流降水临近预报 我国地域辽阔&#xff0c;自然条件复杂&#xff0c;因此灾害性天气种类繁多&#xff0c;地区差异大。其中&#xff0c;雷雨大风、冰雹、龙卷、短时强降水等强对流天气是造成经济损失、危害生命安全最严重的一类灾害性天气[1]。以202…
阅读更多...
计算机毕业设计 基于SpringBoot的“漫画之家”系统的设计与实现 Java实战项目 附源码+文档+视频讲解

计算机毕业设计 基于SpringBoot的“漫画之家”系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…
阅读更多...
SmartCode ViewerX VNC 3.11 Crack

SmartCode ViewerX VNC 3.11 Crack

SmartCode ViewerX VNC 查看器 ActiveX 轻松地将 VNC 查看器功能添加到您的应用程序中 SmartCode ViewerX VNC Viewer ActiveX 使开发人员可以使用一组直观的 ActiveX 属性和方法完全访问 VNC 查看器功能。借助ViewerX控件&#xff0c;开发人员可以轻松地为其应用程序提供屏幕共…
阅读更多...
如何判断IP地址的合法性

如何判断IP地址的合法性

判断IP地址的合法性是网络管理和安全领域中非常重要的任务之一。IP地址&#xff08;Internet Protocol Address&#xff09;是计算机网络中用于标识和定位设备的一种数字地址。合法的IP地址必须符合特定的格式和规范。在这篇文章中&#xff0c;我们将讨论如何判断IP地址的合法性…
阅读更多...
算法通关村-----一图理解递归

算法通关村-----一图理解递归

递归的本质 递归的本质是方法调用&#xff0c;自己调用自己&#xff0c;系统为我们维护了不同调用之间的保存和返回功能。 递归的特征 执行范围不断缩小&#xff0c;这样才能触底反弹 终止判断在递归调用之前 如何写递归 以n的阶乘为例 第一步 从小到大递推 n1 f(1)1 …
阅读更多...
C++标准模板库——vector的使用及其模拟实现

C++标准模板库——vector的使用及其模拟实现

目录 一. vector的介绍 1.vector的介绍 二.vector的使用 vector中常见接口的介绍vector的构造和析构函数vector的三种遍历方式 三.vector的模拟实现 vector的增删查改vector容器的容量变化和大小增减vector迭代器失效问题vector的小框架 构造函数和析构函数迭代器和operat…
阅读更多...
基于AR增强现实模拟离心泵结构拆装与运行

基于AR增强现实模拟离心泵结构拆装与运行

通过AR模拟&#xff0c;学生可以虚拟地观察离心泵的结构和部件&#xff0c;进行拆装、安装和调试的操作&#xff0c;而无需实际接触物理设备。这极大地降低了学生操作过程中的风险。 AR模拟离心泵的拆装过程可以分为几个步骤。首先&#xff0c;学生选择相应的模拟程序&#xff…
阅读更多...
如何利用kakaoTalk进行营销？

如何利用kakaoTalk进行营销？

kakaoTalk是一款韩国即时通讯软件&#xff0c;用户渗透率达95%&#xff0c;使用程度类似于国内的微信。而除了普通的聊天功能外&#xff0c;他还包含叫车服务、食品外送、餐厅预订、支付和游戏等多种功能&#xff0c;几乎每个韩国人都在使用KakaoTalk。 因此&#xff0c;对于要…
阅读更多...
Java中swing的5种布局方式浅析

Java中swing的5种布局方式浅析

在一个传统的java项目中&#xff0c;遇到一个需要调整布局的需求&#xff0c;下面将学习网上大佬的文章&#xff0c;并将过程记录下来。 1、Java swing5种布局方式 1、 边界布局&#xff08;BorderLayout&#xff09;2、流式布局&#xff08;FlowLayout&#xff09;3、网格布局…
阅读更多...
Quartz 建表语句SQL文件

Quartz 建表语句SQL文件

SQL文件在jar里面&#xff0c;github下载 https://github.com/quartz-scheduler/quartz/releases/tag/v2.3.2 解压&#xff0c;sql文件路径&#xff1a;quartz-core\src\main\resources\org\quartz\impl\jdbcjobstore tables_mysql_innodb.sql # # In your Quartz propertie…
阅读更多...
yo！这里是c++中的多态

yo！这里是c++中的多态

前言 在学完继承之后&#xff0c;紧接着我们来认识多态&#xff0c;建议继承不太熟的先把继承部分的知识点搞熟&#xff0c;再来学习多态&#xff0c;否则会走火入魔&#xff0c;会混乱。因为多态是建立在继承的基础之上&#xff0c;而且多态中还存在与继承类似的概念&#xff…
阅读更多...
大数据学习1.3-xShell配置jdk

大数据学习1.3-xShell配置jdk

1.创建java文件 mkdir /usr/local/java 2.切换到java中 cd /user/local/java/ 3.将jdk直接拖到xShell中 4.解压jdk tar -zxvf jdk-8u221-linux-x64.tar.gz 5.配置环境变量-进入环境变量文件 vi /etc/profile 6.添加如下内容 JAVA_HOME/usr/local/java/jdk1.8.0_221 CLASSP…
阅读更多...
【方案】浅析利用AI智能识别与视频监控技术打造智慧水产养殖监管系统

【方案】浅析利用AI智能识别与视频监控技术打造智慧水产养殖监管系统

一、方案背景 针对目前水产养殖集约、高产、高效、生态、安全的发展需求&#xff0c;基于智能传感、智慧物联网、人工智能、视频监控等技术打造智慧水产系统&#xff0c;成为当前行业的发展趋势。传统的人工观察水产养殖方式较为单一&#xff0c;难以及时发现人员非法入侵、偷…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023