随笔分类 - 编程开发 / 前端开发 / React
摘要：简介 yarn 和 npm 都是 JavaScript 生态中常用的包管理工具，用于安装、管理和发布 JavaScript 包。它们虽然功能类似，但在性能、特性和使用体验上等有一些区别。 背景 工具 背景 npm Node.js 自带的包管理工具，历史悠久，生态庞大。是 JavaScript 生态的
阅读全文
摘要：添加购物车实现 需求理解 点击 + 号添加当前商品到购物车列表 实现步骤 使用 RTK 管理新状态 cartList 思路：如果添加过，只更新数量 count，没有添加过，直接push进去 组件中点击时搜集数据提交 action 添加购物车 代码实现 store/modules/takeaway.j
阅读全文
摘要：商品列表切换显示 需求 条件渲染：控制对应项显示 activeIndex index && 视图 实现 App.js import NavBar from './components/NavBar' import Menu from './components/Menu' import Cart f
阅读全文
摘要：点击分类激活交易实现 步骤分析 使用RTK编写管理activeIndex 组件中点击触发action更改activeIndex 动态控制激活类名显示 实现示例 使用RTK编写管理activeIndex：takeaway.js // 编写store import { createSlice } fro
阅读全文
摘要：分类和商品列表渲染 实现步骤 启动项目（mock服务+前端服务） 使用RTK编写store（异步action） 组件触发action并且渲染数据 实现示例 takeaway.js // 编写store import { createSlice } from '@reduxjs/toolkit' im
阅读全文
摘要：准备环境 克隆项目到本地 内置了基础静态组件和模版：git clone http://git.itcast.cn/heimaqianduan/redux-meituan.git 安装所有依赖 npm i 启动mock服务 内置了 json-server：npm run serve 启动前端服务 np
阅读全文
摘要：异步状态操作 异步操作步骤 创建store的写法保持不变，配置好同步修改状态的方法 单独封装一个函数，在函数内部return一个新函数，在新函数中 封装异步请求获取数据 调用同步actionCreater传入异步数据生成一个action对象，并使用dispatch提交 组件中dispatch的写法保
阅读全文
摘要：提交action 需求说明 组件中有两个按钮 ’+10‘ 和 ‘+20’，可以直接把count值修改到对应的数字，目标count值是在组件中传递过去的，需要在提交action的时候提交参数。 需求实现 在 reducers 的同步修改方法中添加action对象参数，在调用actionCreater的
阅读全文
摘要：Counter实现 思路 实现 使用 react toolkit 创建 counterStore counterStore.js import { createSlice } from "@reduxjs/toolkit" const counterStore = createSlice({ nam
阅读全文
摘要：redux 环境搭建 配套工具 在react中使用redux，官方要求安装两个插件：Redux Toolkit 和 react-redux。 React Toolkit（RTK）- 官方推荐编写redux逻辑的方式，是一套工具的集合集，简化书写方式。 简化store的配置方式 内置immer支持可变
阅读全文
摘要：Redux 介绍 redux 是 React 最常用的集中状态管理工具，类似于 vue 中的 Pinia（Vuex），可以独立于框架运行，作用是通过集中管理的方式管理应用的状态。 使用步骤 定义一个 reducer 函数（根据当前想要做的修改返回一个新的状态） 使用 createStore 方法传入
阅读全文
摘要：自定义hook函数 概念 自定义hook是以use打头的函数，通过自定义hook函数可以用来实现逻辑的封装和复用。 思路 声明一个use打头的函数 在函数体内封装可以复用的逻辑（只要是可复用的逻辑） 在组件中用到的状态或者回调return出去（以对象或数组） 在哪个组件中要用到这个逻辑，就执行这个函
阅读全文
摘要：useEffect 清除副作用 介绍 在 useEffect 中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用。 说明 清除副作用的函数最常见的执行时机是在组件卸载时自
阅读全文
摘要：useEffect依赖项 参数说明 useEffect副作用函数的执行时机存在多种情况，根据传入依赖项的不同，会有不同的执行表现。 没有依赖项：组件初始渲染 + 组件更新时执行 空数组依赖：只在初始渲染时执行一次 添加特定依赖项：组件初始渲染 + 特性依赖项变化时执行 示例 import { use
阅读全文
摘要：useEffect 介绍 是一个 react hook函数，用于在react组件中创建不是由事件引起而是由渲染本身引起的操作，比如发送ajax请求，更改dom等等。 说明：上面的组件中没有发生任何的用户事件，组件渲染完毕之后就需要和服务器要数据，整个过程属于 “只由渲染引起的操作” 基础使用 需求
阅读全文
摘要：组件通信 - 跨层通信 实现方式 使用 centext 机制 实现步骤 使用 createContext 方法创建一个上下文对象Ctx 在顶层组件（如App，即提供数据方）中通过 Ctx.Provider 组件提供数据 在底层组件（B）中通过 useContext 钩子函数获取消费数据 示例 imp
阅读全文
摘要：day.js 介绍 Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。 使用 官网 https://dayjs.fenxianglu.cn 安装 npm install dayjs 应用 格式化 根据传入的占位符返回格式化后的日期 dayjs().fo
阅读全文
摘要：组件通信 - 兄弟通信 思路 借助 “状态提升” 机制，通过父组件进行兄弟组件之间的数据传递。 步骤 A组件先通过子传父的方式把数据传给父组件App 父组件App拿到数据后通过父传子的方式再传递给B组件 示例 import { useState } from "react" function A({
阅读全文
摘要：组件通信 - 子传父 核心思路 在子组件中调用父组件中的函数并传递参数 示例 import { useState } from "react" function Son({ onGetSonMsg }) { const sonMsg = "this is son msg" return ( <div
阅读全文
摘要：组件通信 概念 组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信方法。 分类 父子通信、兄弟通信、跨层通信 父传子 实现步骤 父组件传递数据 - 在子组件标签上绑定属性 子组件接收数据 - 子组件通过props参数接收数据 示例 function Son(props) { ret
阅读全文
浙公网安备 33010602011771号