React 全栈体系（十二）

编程语言 2023-10-02 17:29:17 阅读次数: 0

第六章 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值

猜你喜欢

转载自blog.csdn.net/sgsgkxkx/article/details/133148255
今日推荐
周排行
成为C++高手之宏与枚举
在CAD二次开发中使用进度条
Js插件ECharts，HighCharts学习网址整理
Celery提交任务出错(on windows.)
cephfs内核客户端性能追踪
thinkphp中PHPExcel用法
EntityFramework动态组合多排序字段
汇编语言（八）实验9 根据材料编程
安装ubuntu后必须做的事情（对我而言）
JS函数式编程
每日归档
更多
2024-10-22(0)
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022