React

使用 Redux 实现购物车案例 由于 redux 5.0 已经将 createStore 废弃，我们需要先将 @reduxjs/toolkit 安装一下； 使用 vite 创建 React 项目时候

不使用 redux 实现 购物车案例 使用 React 自带的 useState 和 useEffect Hook 即可实现购物车 1、新增商品 使用 setList() 进数据状态更新 2、修改商品

1、Redux概述 Redux 是一个用于 JavaScript 状态容器，提供可以预测的状态管理 Redux 可以让我们的构建一致化的应用，运行于不同的环境，客户端、浏览器、服务器，并且易于测试；

接下来 开始Redux 全面详细的文档输出，主要基于一下几个方面，欢迎大家补充指正 一、Redux 基础概念 为什么需要 Redux？ 前端状态管理的挑战（组件间通信、状态共享） Redux 解决的问

一、StrictMode 的核心作用 React StrictMode 是 React 16.3 引入的开发辅助工具，通过主动触发特殊检查帮助开发者提前发现潜在问题。它像一位严格的代码审查员，在开发阶

一、为什么需要性能测试 在现代前端应用中，组件树的复杂度往往以指数级增长。一个简单的点击事件可能触发数十个组件的连锁渲染，而开发者却如同置身黑暗迷宫，难以准确找到性能瓶颈所在。React Profil

文章如果错误偏差，烦请及时批评指正 一、为什么要使用 <Fragment>？ 因为在 React 中，组件必须返回单个根元素。当我们尝试直接返回相邻的 JSX 元素时： 传统解决方案是使用 包裹，但这

若有错误，欢迎批评指正 概述 React 18 引入的 useDeferredValue 是优化渲染性能的重要工具，特别适用于处理高开销的更新（如实时搜索、大型列表渲染）。它通过延迟非紧急的 UI 更

文章内容 基于 React 18+ ，如有错误，欢迎批评指正； 一、概述： useTransition 是一个在不阻塞UI渲染的情况下更新数据状态，它会降低当前视图的渲染优先级，而优先执行视图中其它用

为什么要进行组件的封装？ 为了代码高效复用，易维护，易应用；说的直白一下就是为了自己少写代码，有更多的时间钻研更多其他方面的事物；甚至可以说是为了自己有更多摸鱼时间； 一、组件封装的核心原则 1、单一

1、概述 在React 中我们通常会使用 useState useReducer 进行数据状态更新，但是当我们需要对外部的数据状态进行处理时候，我们需要使用React 提供的新Hook，useSync

1、概述 useDeferredValue 是用于延迟渲染视图UI组件的，可以帮助我们管理视图渲染过程中的状态，并提高程序运行的性能； 2、用法 params: 是我们需要延迟的数据；可以是任何类型的

简述 useRef 用于操作不需要在视图上渲染的属性数据，用于访问真实的DOM节点，或者React组件的实例对象，允许直接操作DOM元素或者是组件； 写法 参数： useRef(params)，接收的

1、概述 useLayoutEffect 是useEffect 的一个衍生版本，只是他们的执行时机不同 useLayoutEffect 用于在DOM更新执行完成之后，浏览器渲染绘制之前执行，这会阻塞浏

1、概述 useEffect 是React中一个用于 将组件与外部系统同步的 Hook；在函数式组件中处理副作用函数的 Hook，用于替代类式组件中的生命周期函数； 可以在副作用函数中 实现以下操作：

概述 useMemo 是React 中的一个HOOK，用于根据依赖在每次渲染时候缓存计算结果； 大白话就是，只有依赖项发生变化时候，才会重新渲染为新计算的值，否则就还是取原来的值，有点类似 vue 中

useCallback 概述 1、useCallback 是在React 中多次渲染缓存函数的 Hook，返回一个函数的 memoized的值； 2、如果多次传入的依赖项不变，那么多次定义的时候，返回

useReducer() 的用法注意事项 1、 概述： useReducer() 常用于管理复杂的状态更新逻辑，特别是在状态更新依赖于多个条件或动作时，useReducer 提供了一种更加结构化和可维

一、useState() Hook 使用 useState视图更新用法 1、写法： 利用数组解构写法， 第一个参数是自定义的属性，用于初始化时候渲染，如上面代码，初始化时候渲染为 'Andy' 第二个

一、视图更新有哪些方案？ useState用法介绍 1、对于数据变量 正常的增删改查，只会让数据更新，但是不会触发 React 视图的更新； 如： 2、为什么会出现这种情况？ 2.1、局部变量无法在多