React(coderwhy)- 05(redux)

news2024/11/26 22:47:08

Redux的核心思想

理解JavaScript纯函数

函数式编程 中有一个非常重要的概念叫 纯函数 ,JavaScript符合 函数式编程的范式 ,所以也 有纯函数的概念
         在 react开发中纯函数是被多次提及 的;
         比如 react中组件就被要求像是一个纯函数 (为什么是像,因为还有class组件), redux中有一个reducer的概念 ,也是要求
必须是一个纯函数;
         所以 掌握纯函数对于理解很多框架的设计 是非常有帮助的;
纯函数的维基百科定义:
         在程序设计中,若一个函数 符合以下条件 ,那么这个函数被称为纯函数:
         此函数 在相同的输入值时 ,需 产生相同的输出
         函数的 输出和输入值以外的其他隐藏信息或状态无关 ,也和 由I/O设备产生的外部输出 无关。
         该函数 不能有语义上可观察的函数副作用 ,诸如 “触发事件” 使输出设备输出,或更改输出值以外物件的内容 等。
当然上面的定义会过于的晦涩,所以我简单总结一下:
         确定的输入,一定会产生确定的输出
         函数在执行过程中,不能产生副作用

副作用概念的理解

那么这里又有一个概念,叫做副作用 ,什么又是 副作用 呢?
         副作用(side effect) 其实本身是医学的一个概念,比如我们经常说吃什么药本来是为了治病,可能会产生一些其他的副作
用;
         在计算机科学中,也引用了副作用的概念,表示 在执行一个函数 时,除了 返回函数值 之外,还对 调用函数产生了附加的影响
比如 修改了全局变量 修改参数或者改变外部的存储
纯函数在执行的过程中就是不能产生这样的副作用:
         副作用往往是产生 bug的 “温床”

纯函数的案例

我们来看一个对数组操作的两个函数:
         slice :slice截取数组时不会对原数组进行任何操作,而是生成一个新的数组;
         splice :splice截取数组, 会返回一个新的数组, 也会对原数组进行修改;
slice就是一个纯函数,不会修改数组本身,而splice函数不是一个纯函数;

判断下面函数是否是纯函数?


纯函数的作用和优势 

为什么纯函数在函数式编程中非常重要呢?
         因为你可以 安心的编写 安心的使用
         你在 写的时候 保证了函数的纯度,只是 单纯实现自己的业务逻辑 即可, 不需要关心传入的内容 是如何获得的或者 依赖其他的
外部变量 是否已经发生了修改;
         你在 用的时候 ,你确定 你的输入内容不会被任意篡改 ,并且 自己确定的输入 ,一定会 有确定的输出
React中就要求我们无论是 函数还是class声明一个组件 ,这个组件都必须 像纯函数一样 保护它们的props不被修改:

在接下来学习redux中,reducer也被要求是一个纯函数。

Redux的基本使用

为什么需要redux

JavaScript开发的应用程序,已经变得越来越复杂了:
         JavaScript需要 管理的状态越来越多,越来越复杂
         这些状态包括 服务器返回的数据、缓存数据、用户操作产生的数据 等等,也包括一些 UI的状 态,比如 某些元素是否被选中,是否显示
加载动效,当前分页
管理不断变化的state是非常困难的:
         状态之间相互会存在依赖 一个状态的变化会引起另一个状态的变化 View页面也有可能会引起状态的变化
         当应用程序复杂时, state在什么时候 因为什么原因而发生了变化 发生了怎么样的变化 ,会变得非常 难以控制和追踪
React是在视图层帮助我们解决了DOM的渲染过程,但是State依然是留给我们自己来管理:
         无论是 组件定义自己的state ,还是 组件之间的通信通过props进行传递 ;也包括 通过Context进行数据之间的共享
         React主要负责帮助我们 管理视图 ,state如何维护最终 还是我们自己来决定

Redux就是一个帮助我们管理State的容器:Redux是 JavaScript的状态容器 ,提供了 可预测的状态管理
Redux除了和React一起使用之外,它也可以和其他界面库一起来使用(比如Vue),并且它非常小(包括依赖在内,只有2kb)

Redux的核心理念 - Store

Redux的核心理念非常简单。
比如我们有一个朋友列表需要管理:
         如果我们 没有定义统一的规范来操作这段数据 ,那么 整个数据的变化就是无法跟踪的
         比如页面的某处通过products.push的方式增加了一条数据;
         比如另一个页面通过products[0].age = 25修改了一条数据;
整个应用程序错综复杂,当出现bug时,很难跟踪到底哪里发生的变化;

Redux的核心理念 - action 

Redux要求我们通过action来更新数据:
         所有数据的变化,必须通过 派发(dispatch)action来更新
         action是一个普通的JavaScript对象 ,用来描述这次 更新的type和content
比如下面就是几个更新friends的action:
         强制使用action的好处是可以 清晰的知道数据到底发生了什么样的变化,所有的数据变化都是可跟追、可预测的
         当然,目前我们的 action是固定的对象;
         真实应用中,我们 会通过函数来定义,返回一个action

Redux的核心理念 - reducer 

但是如何将state和action联系在一起呢?答案就是reducer
         reducer是 一个纯函数
         reducer做的事情就是 将传入的state和action结合起来生成一个新的state

建议使用Switch循环:

const { createStore } = require("redux")

// 初始化的数据
const initialState = {
  name: "why",
  counter: 100
}


// 定义reducer函数: 纯函数
// 两个参数: 
// 参数一: store中目前保存的state
// 参数二: 本次需要更新的action(dispatch传入的action)
// 返回值: 它的返回值会作为store之后存储的state
function reducer(state = initialState, action) {
  // 有新数据进行更新的时候, 那么返回一个新的state
  if (action.type === "change_name") {
    return { ...state, name: action.name }
  } else if (action.type === "add_number") {
    return { ...state, counter: state.counter + action.num }
  }

  // 没有新数据更新, 那么返回之前的state
  return state
}


// 创建的store
const store = createStore(reducer)


module.exports = store

-------------------------------------
const { createStore } = require("redux")

// 初始化的数据
const initialState = {
  name: "why",
  counter: 100
}


// 定义reducer函数: 纯函数
// 两个参数: 
// 参数一: store中目前保存的state
// 参数二: 本次需要更新的action(dispatch传入的action)
// 返回值: 它的返回值会作为store之后存储的state
function reducer(state = initialState, action) {
  switch(action.type) {
    case "change_name":
      return { ...state, name: action.name }
    case "add_number":
      return { ...state, counter: state.counter + action.num }
    default:
      return state
  }
}

// 创建的store
const store = createStore(reducer)


module.exports = store



获取和修改:

  • 使用getState() 来获取
  • 使用dispatch() 来修改, 传入action
const store = require("./store")

console.log(store.getState())


// 修改store中的数据: 必须action
const nameAction = { type: "change_name", name: "kobe" }
store.dispatch(nameAction)

console.log(store.getState())

const nameAction2 = { type: "change_name", name: "lilei" }
store.dispatch(nameAction2)
console.log(store.getState())

// 修改counter
const counterAction = { type: "add_number", num: 10 }
store.dispatch(counterAction)
console.log(store.getState())

订阅:

  • 使用subscribe 来订阅
  • unsubscribe() 取消订阅

const store = require("./store")

const unsubscribe = store.subscribe(() => {
  console.log("订阅数据的变化:", store.getState())
})


// 修改store中的数据: 必须action
store.dispatch({ type: "change_name", name: "kobe" })
store.dispatch({ type: "change_name", name: "lilei" })

unsubscribe()

// 修改counter
store.dispatch({ type: "add_number", num: 10 })
store.dispatch({ type: "add_number", num: 20 })
store.dispatch({ type: "add_number", num: 30 })
store.dispatch({ type: "add_number", num: 100 })

动态生成action:

/**
 * redux代码优化:
 *  1.将派发的action生成过程放到一个actionCreators函数中
 *  2.将定义的所有actionCreators的函数, 放到一个独立的文件中: actionCreators.js
 *  3.actionCreators和reducer函数中使用字符串常量是一致的, 所以将常量抽取到一个独立constants的文件中
 *  4.将reducer和默认值(initialState)放到一个独立的reducer.js文件中, 而不是在index.js
 */

const store = require("./store")
const { addNumberAction, changeNameAction } = require("./store/actionCreators")

const unsubscribe = store.subscribe(() => {
  console.log("订阅数据的变化:", store.getState())
})

// actionCreators: 帮助我们创建action
// const changeNameAction = (name) => ({
//   type: "change_name",
//   name
// })


// 修改store中的数据: 必须action
store.dispatch(changeNameAction("kobe"))
store.dispatch(changeNameAction("lilei"))
store.dispatch(changeNameAction("james"))

// 修改counter
// const addNumberAction = (num) => ({
//   type: "add_number",
//   num
// })

store.dispatch(addNumberAction(10))
store.dispatch(addNumberAction(20))
store.dispatch(addNumberAction(30))
store.dispatch(addNumberAction(100))


Redux的三大原则 

单一数据源
         整个应用程序的 state被存储在一颗object tree中 ,并且 这个object tree只存储在一个 store 中:
         Redux 并没有强制让我们不能创建多个Store ,但是 那样做并不利于数据的维护
         单一的数据源 可以让整个应用程序的state变得 方便维护、追踪、修改
State是只读的
         唯一修改State的方法一定是触发action 不要试图在其他地方通过任何的方式来修改State
         这样就确保了View或网络请求都 不能直接修改state ,它们只能 通过action来描述自己想要如何修改state
         这样可以 保证所有的修改都被集中化处理 ,并且 按照严格的顺序来执行 ,所以 不需要担心race condition(竟态)的问题
使用纯函数来执行修改
         通过reducer将 旧state和 actions联系在一起 ,并且 返回一个新的State
         随着 应用程序的复杂度增加 ,我们 可以将reducer拆分成多个小的reducers 分别操作不同state tree的一部分
         但是 所有的reducer都应该是纯函数 ,不能产生任何的副作用;

Redux的使用过程

1.创建一个对象,作为我们要保存的状态:
2.创建Store来存储这个state
         创建store时必须创建reducer;
         我们可以通过 store.getState 来获取当前的state;
3.通过action来修改state
         通过dispatch来派发action;
         通常action中都会有type属性,也可以携带其他的数据;
4.修改reducer中的处理代码
         这里一定要记住,reducer是一个纯函数,不需要直接修改state;
         后面我会讲到直接修改state带来的问题;
5.可以在派发action之前,监听store的变化:

Redux使用流程

 Redux官方图

React结合Redux

redux融入react代码

目前redux在react中使用是最多的,所以我们需要将之前编写的redux代码,融入到react当中去。
这里我创建了两个组件:
         Home组件:其中会展示当前的counter值,并且有一个+1和+5的按钮;
         Profile组件:其中会展示当前的counter值,并且有一个-1和-5的按钮;

核心代码主要是两个:
         在 componentDidMount 中定义数据的变化,当数据发生变化时重新设置 counter;
         在发生点击事件时,调用store的dispatch来派发对应的action;

react-redux使用

index入口文件:


 组件中异步操作 

在之前简单的案例中,redux中保存的counter是一个本地定义的数据
         我们可以直接通过同步的操作来dispatch action,state就会被立即更新。
         但是真实开发中, redux中保存的很多数据可能来自服务器 ,我们需要进行 异步的请求 ,再 将数据保存到redux 中。
在之前学习网络请求的时候我们讲过,网络请求可以在class组件的componentDidMount中发送,所以我们可以有这样的结构:
我现在完成如下案例操作:
         在Home组件中请求banners和recommends的数据;
         在Profile组件中展示banners和recommends的数据;

个人补充:

类组件使用connect,函数组件使用useSelector

import React, { PureComponent } from 'react'
import { connect } from "react-redux"
// import store from "../store"
import { addNumberAction, subNumberAction } from '../store/counter'

export class About extends PureComponent {

  calcNumber(num, isAdd) {
    if (isAdd) {
      console.log("加", num)
      this.props.addNumber(num)
    } else {
      console.log("减", num)
      this.props.subNumber(num)
    }
  }

  render() {
    const { counter, banners, recommends, userInfo } = this.props

    return (
      <div>
        <div className='user'>
          <h2>nickname: {userInfo.nickname}</h2>
        </div>
        <h2>About Page: {counter}</h2>
        <div>
          <button onClick={e => this.calcNumber(6, true)}>+6</button>
          <button onClick={e => this.calcNumber(88, true)}>+88</button>
          <button onClick={e => this.calcNumber(6, false)}>-6</button>
          <button onClick={e => this.calcNumber(88, false)}>-88</button>
        </div>
        <div className='banner'>
          <h2>轮播图数据:</h2>
          <ul>
            {
              banners.map((item, index) => {
                return <li key={index}>{item.title}</li>
              })
            }
          </ul>
        </div>
        <div className='recommend'>
          <h2>推荐数据:</h2>
          <ul>
            {
              recommends.map((item, index) => {
                return <li key={index}>{item.title}</li>
              })
            }
          </ul>
        </div>
      </div>
    )
  }
}

// connect()返回值是一个高阶组件
// function mapStateToProps(state) {
//   return {
//     counter: state.counter
//   }
// }

// function fn2(dispatch) {
//   return {
//     addNumber(num) {
//       dispatch(addNumberAction(num))
//     },
//     subNumber(num) { 
//       dispatch(subNumberAction(num))
//     }
//   }
// }

const mapStateToProps = (state) => ({
  counter: state.counter.counter,
  banners: state.home.banners,
  recommends: state.home.recommends,
  userInfo: state.user.userInfo
})

const mapDispatchToProps = (dispatch) => ({
  addNumber(num) {
    dispatch(addNumberAction(num))
  },
  subNumber(num) {
    dispatch(subNumberAction(num))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(About)

Redux的异步操作

redux中异步操作

上面的代码有一个缺陷:
         我们必须 将网络请求的异步代码放到组件的生命周期中来完成
         事实上, 网络请求到的数据也属于我们状态管理的一部分 ,更好的一种方式应该是 将其也交给redux来管理
但是在redux中如何可以进行异步的操作呢?
         答案就是使用 中间件(Middleware)
         学习过Express或Koa框架的童鞋对中间件的概念一定不陌生;
         在这类框架中,Middleware可以帮助我们 在请求和响应之间嵌入一些操作的代码 ,比如cookie解析、日志记录、文件压缩等操作;

 理解中间件

redux也引入了中间件(Middleware)的概念:
         这个中间件的目的是 在dispatch的action和最终达到的reducer之间,扩展一些自己的代码
         比如 日志记录、调用异步接口、添加代码调试功能 等等;
我们现在要做的事情就是发送异步的网络请求,所以我们可以添加对应的中间件:
         这里 官网推荐的、包括演示的网络请求的中间件 使用 redux-thunk
redux-thunk是如何做到让我们可以发送异步的请求呢?
         我们知道, 默认情况下的dispatch(action) action需要是一个JavaScript的对象
         redux-thunk可以让 dispatch(action函数) ,action 可以是一个函数
         该函数会被调用,并且会传给 这个函数一个dispatch函数和getState函数
        ✓ dispatch函数 用于我们之后再次派发action;
        ✓ getState函数 考虑到我们之后的一些操作需要依赖原来的状态,用于让我们可以获取之前的一些状态;

如何使用redux-thunk

import { createStore, applyMiddleware, compose } from "redux"
import thunk from "redux-thunk"
import reducer from "./reducer"

// 正常情况下 store.dispatch(object)
// 想要派发函数 store.dispatch(function)

// redux-devtools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({trace: true}) || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)))

export default store

 

redux-devtool

redux-devtools

我们之前讲过,redux可以方便的让我们对状态进行跟踪和调试,那么如何做到呢?
         redux官网为我们 提供了redux-devtools的工具
         利用这个工具,我们可以知道 每次状态是如何被修改的,修改前后的状态变化 等等;
安装该工具需要两步:
         第一步:在对应的浏览器中安装相关的插件(比如Chrome浏览器扩展商店中搜索Redux DevTools即可);
         第二步:在redux中继承devtools的中间件;
import { createStore, applyMiddleware, compose } from "redux"
import thunk from "redux-thunk"
import reducer from "./reducer"

// 正常情况下 store.dispatch(object)
// 想要派发函数 store.dispatch(function)

// redux-devtools
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({trace: true}) || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)))

export default store

reducer的模块拆分

Reducer代码拆分

我们先来理解一下,为什么这个函数叫reducer?
我们来看一下目前我们的reducer:
         当前这个reducer既有处理counter的代码,又有处理home页面的数据;
         后续counter相关的状态或home相关的状态会进一步变得更加复杂;
         我们也会继续添加其他的相关状态,比如购物车、分类、歌单等等;
         如果将所有的状态都放到一个reducer中进行管理,随着项目的日趋庞大,必然会造成代码臃肿、难以维护。
因此,我们可以对reducer进行拆分:
         我们先抽取一个对counter处理的reducer;
         再抽取一个对home处理的reducer;
         将它们合并起来;

Reducer文件拆分

目前我们已经将不同的状态处理拆分到不同的reducer中,我们来思考:
         虽然已经放到不同的函数了,但是这些函数的处理依然是在同一个文件中,代码非常的混乱;
         另外关于reducer中用到的constant、action等我们也依然是在同一个文件中;

combineReducers函数 

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

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

相关文章

数据库迁移到达梦的一些记录

1 达梦迁移工具 参考MySQL迁移到达梦-超出定义长度问题 使用你设置的配置&#xff0c;即可&#xff0c;因为达梦默认采用按照字节存储&#xff0c;mysql是按照字符存储&#xff0c;故而他认为越界了。 使用3.5G数据&#xff0c;342张表进行数据迁移验证 第一此执行,结果 任务…

linux安装mysql以及允许外网访问mysql

下载社区版本 下载最新版 下载历史版本 点击 Archives 文件上传云服务器 /opt/mysql 存放目录随便 添加用户组 groupadd mysql useradd -r -g mysql mysql删除mariadb rpm -qa|grep mariadbrpm -e --nodeps mariadb-libs安装 解压tar -xvf mysql-5.7.20-1.el7.x86_64…

中国企业邮箱安全性研究报告

声明 本文是学习中国企业邮箱安全性研究报告. 下载地址 http://github5.com/view/55003而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 奇安信网神邮件威胁检测系统 奇安信网神邮件威胁检测系统是奇安信集团面向政府、企业、金融、军队等大型企事业单…

javaEE初阶 — 阻塞队列

文章目录阻塞队列1. 概念与特性2. 生产者与消费者模型2.1 生产者消费者模型的两个好处&#xff08;主要的&#xff09;3. 标准库中的阻塞队列3.1 代码实现生产者消费者模型4. 阻塞队列实现4.1 普通队列实现4.2 给队列追加阻塞功能阻塞队列 1. 概念与特性 阻塞队列 是一种特殊的…

Centos 安装Datax及Datax-web

异构数据的采集&#xff0c;方案还是比较多样&#xff0c;除了基于大数据平台的一些集成&#xff1b;简单的数据源&#xff0c;可以直接使用阿里开源的datax来实现&#xff1b;datax-web则是datax界面化操作的开源框架&#xff0c;集成了datax异构数据采集和任务调度的功能。关…

【Kubernetes | Pod 系列】 Pod 的生命周期 Ⅱ —— 容器重启策略

目录题5.4 容器重启策略示例&#xff08;1&#xff09;Always 策略&#xff08;2&#xff09;OnFailure 策略&#xff08;3&#xff09;Never 策略5.4 容器重启策略 在 Pod 的 YAML 清单的 spec 中包含一个 restartPolicy 字段&#xff0c;其可能取值包括 Always&#xff08;…

Jdbc配置文件连接mysql8.0——批量增删改查操作

目录 一、批量插入数据 (一)在DogDao中新增一个功能saveDogList (二)DogDaoImpl实现类中定义字符串拼接实现功能saveDogList (三)DogTest测试 (四)批量插入运行结果 (五)优化后的批量插入 1.DogDao接口中还是使用原来的新增功能saveDog 2. DogDaoImpl实现类中实现saveD…

DOS、DDos攻击详解

目录 一、DDOS 是什么&#xff1f; 二、DDoS的危害 三、常见的DOS攻击 四.DDoS的防范 一、DDOS 是什么&#xff1f; DoS为Denial of Service的简称&#xff0c;意思是拒绝服务。DoS攻击是一种使被攻击者无法正常提供服务的攻击 来解释一下&#xff0c;DDOS 是什么。 举例…

esxi6.0安装

一、安装exsi需要注意的事项&#xff1a; 1.进入BIOS做raid 不同硬件厂商进入bios的方式各不相同&#xff0c;请自行查阅相关资料 RAID 0的特点&#xff1a; 最少需要两块磁盘 数据条带式分布 没有冗余&#xff0c;性能最佳(不存储镜像、校验信息) 不能应用于对数据安全性要求…

代码随想录回溯总结

文章目录0、 前言1、回溯的定义2、回溯解决那些问题3、回溯模板4、问题详解4、1组合问题&#xff1a;[4.1.1 组合](https://leetcode.cn/problems/combinations/)[4.1.2 组合总和 II](https://leetcode.cn/problems/combination-sum-ii/)4.1.3 组合的其他问题4.2排列问题4.2.1[…

3.Isaac入门

Isaac入门 本节提供有关如何开始开发和运行 Isaac 应用程序的指南。 文章目录Isaac入门教程和示例应用程序运行应用程序应用程序控制台选项在 Jetson 上部署和运行Python 应用程序支持使用分布式工作区使用 Docker安装依赖创建 Isaac SDK 开发镜像教程和示例应用程序 有一个可…

【运维有小邓】实时告警通知

当网络上发生特定事件时&#xff0c;EventLog Analyzer可以通过多种方式进行响应。EventLog Analyzer可以实时生成告警 - 发送电子邮件或短信通知给指定的接收者 - 或运行由管理员提供的自定义脚本。通过所提供的多个选项&#xff0c;用户可以确保不会错过任何安全事件。EventL…

Python解题 - CSDN周赛第21期 - 接雨水

本期比赛都是比较基础的排序、查找&#xff0c;没有多少难度。不过有很多人反映第二题测试数据有问题&#xff0c;基本所有选手在本题上都没得分。最近官方每期比赛都会有类似的数据问题&#xff0c;虽然参赛者对数据有疑问&#xff0c;但从未得到解答&#xff0c;官方也未曾公…

十年云深时:天翼云的成长密钥

工业时代&#xff0c;我们通常以“用电量”作为指标&#xff0c;来衡量一个地方的经济发展水平。数字经济时代&#xff0c;“用云量”则与数字经济规模呈正相关。因此&#xff0c;中国数字化浪潮的持续推进&#xff0c;也让云计算行业的重要性与市场竞争性不断提升&#xff0c;…

【C语言】交换奇偶位和 offsetof 宏的实现

​&#x1f320; 作者&#xff1a;阿亮joy. &#x1f386;专栏&#xff1a;《阿亮爱刷题》 &#x1f387; 座右铭&#xff1a;每个优秀的人都有一段沉默的时光&#xff0c;那段时光是付出了很多努力却得不到结果的日子&#xff0c;我们把它叫做扎根 目录&#x1f449;交换奇偶…

2021年 APP个人信息使用态势分析报告

声明 本文是学习2021年APP个人信息使用态势分析报告. 下载地址 http://github5.com/view/55008而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 App违规行为处罚案例 某赚钱类App未明示信息收集规则被罚 经查公安机关调查&#xff0c;某网络科技公司开…

2023 CPA 会计-存货【刷题】

1. 存货的确认和初始计量 大元公司为增值税一般纳税人&#xff0c;增值税税率为13%。 这句话好像没有用 2019年购入材料300公斤&#xff0c;收到增值税发票注明价款1800万元&#xff0c;增值税税额是234万元。 增值税是在价款的基础上收取的&#xff0c;所以这批材料的价值就是…

【收集】缩写合集

AABB 全称&#xff1a;Axis Aligned Bounding Box参考 https://blog.csdn.net/qq_22822335/article/details/50930437AABB包围盒在游戏中&#xff0c;为了简化物体之间的碰撞检测运算&#xff0c;通常会对物体创建一个规则的几何外形将其包围。其中&#xff0c;AABB&#xff08…

【链表】关于链表,你该了解这些!

【链表】理论基础1 链表是什么1.1 单链表1.2 双链表1.3 循环链表2 链表的存储方式3 链表的定义3.1 C/C方式3.2 Java方式3.3 JavaScript方式4 链表的操作4.1 删除结点4.2 添加结点1 链表是什么 1.1 单链表 单链表是一种通过指针串联在一起的线性结构&#xff0c;每一个节点由两…

谷粒学苑项目-第一章数据库设计与项目结构

一、数据库设计 1、数据库 guli2、数据表 CREATE TABLE edu_teacher (id char(19) NOT NULL COMMENT 讲师ID,name varchar(20) NOT NULL COMMENT 讲师姓名,intro varchar(500) NOT NULL DEFAULT COMMENT 讲师简介,career varchar(500) DEFAULT NULL COMMENT 讲师资历,一句话说…