基于 React 国际化（i18n）：你还在项目中手动管理语言包吗？
在全球化的背景下，越来越多的应用需要支持多语言用户。实现这种多语言支持的过程通常被称为国际化（i18n）。在 React 项目中， 是一个广泛使用的库，它为开发者提供了强大的工具来简化国际化的实现。 常用的国际化方案 目前，国际化的实现通常有以下几种方案： 1. 静态语言包 ：在项目中预先定义好多语言的静态文件，例如 JSON 文件，然后根据用户的语言选择加载相应的文件。这种方法简单直接，但在需要频繁更新翻译内容时不够灵活。 2. 动态...
React | 浏览器刷新，会执行 useEffect 的 卸载函数吗？
React | 浏览器刷新，会执行 useEffect 的 卸载函数吗？ 需求描述 后端在跑一个长期的异步上传任务，在任务执行过程中，用户刷新页面（f5），此时产品希望能够发送一个 kill 任务，杀掉这个任务。 拆解 需求合理性 其他情况是否存在类似：比如关闭 tab，关闭浏览器，突然断网等操作，等浏览器层级或者异常的用户行为 前端是否应该响应这种行为：对于更深层次的需求处理 根本问题点，或者说为什么会存在这个需求：上一个任务会加锁，...
一个”哇塞“前端需要知道的 React 生态清单
【前端】一个”哇塞“前端需要知道的 React 生态清单 最近在做一个自己的知识库，希望对自己的知识体系做一个彻底的梳理和整理，以便制定今后的学习计划和方向。下面就分享一下我自己整理的整个 知识体系和各生态当前最热门的实践 要成为一个精通 React 的 前端，不仅需要全面掌握 React 的基础概念，同时还需要熟练运用相关的技术生态和工具。虽然 只是一个基于 UI 层面的库，但是整个 React 生态其实是很繁荣的，真正要 ”精通“...
探索 React 渲染工作原理
渲染简单来说可以分为四个阶段： 1. 渲染被触发执行（通常都是由状态更新所触发的） 2. 渲染阶段 React 会调用组件函数并确定 DOM 应该如何更新 3. 提交阶段 DOM 会被更新以反映当前应用程序状态的变化 4. 浏览器会将更新的 DOM 绘制到屏幕上 组件渲染被触发只会发生在两种场景下： 1. 应用程序第一次运行（initial render） 2. 组件实例的状态更新（re render） 注意，状态发生更新后，渲染并不会...
一些react使用小技巧（中）
以下是个人收集总结的一些使用 react 的小技巧第二篇。 五. 高效的状态管理 27\. 永远不要为可以从其他 state 或 props 派生的值创建新的 state state 越多 = 麻烦越多。 每个 state 都可能触发重新渲染，并使重置 state 变得麻烦。 因此，如果可以从 state 或 props 中派生出值，则跳过添加新的 state。 不好的做法：filteredUsers 不需要处于 state 中。 推荐...
React: 同事见了直夸夸的复合组件模式
在React的开发中，我们经常会遇到这样的场景：组件之间需要共享状态，并且根据用户的交互或业务需求，多个组件需要协同工作。这时，设计出既灵活又可维护的组件结构就变得非常重要。复合组件模式 (Compound Component Pattern) 就是一种很好的设计模式，它允许父组件提供共享的状态，子组件则负责完成具体的任务。 概念 复合组件模式指的是，将一个功能拆分成多个子组件，通过上下文（Context）进行状态共享，父组件负责提供核...
解决 antd5 在低版本浏览器中部分 css 样式丢失问题
因为解决 antd5 在低版本浏览器的文章始终没有解决我的问题，或者是不够优雅，因此做了一点整理，希望对你有用，至少对我是有用的 😁😁😁 调查原因 结果是 css 中是 where 在低版本 chrome 浏览器不起作用 然后就去 , 样式不对的浏览器 console 控制台输入 navigator.userAgent 检测浏览器信息，最终结果是 where 不兼容 chrome 88 以下的版本 解决方法 与 antd 有关直接...
用Zustand实现组件级状态管理的最佳实践
在前文中，我们介绍了Zustand这个简单、易用、轻量的状态管理框架。 通常情况下，状态管理通常都是全局的，可以在应用的任意地方访问。然而，这样的做法是否真的符合最佳实践呢？如果从马克思的角度来看，任何片面的观点都是不全面的。事实上，有些时候我们只想创建页面级别或者组件级别的状态，而不是把所有状态都挂在全局。 全局状态的弊端 无效渲染 全局状态管理的一个明显弊端是它可能导致无效的渲染。全局状态通常是在React组件生命周期之外创建的，这...
React hook useEffect 和 useState 和 Vue nextTick 疑惑
场景： 上传一个excel 解析excel表格，填入数据bomTableData。 使用数据渲染表格 同时 使用此数据进行http请求，获取response结果，再次赋值bomTableData，重新渲染。 React 数据为空 经查询得知： 是异步的，这意味着当你调用 时，状态更新并不会立即反映在下一行代码中。在 中打印 时， 可能仍然是旧值。 为了在状态更新后立即执行某些操作，你可以使用 来监控状态的变化。当 更新时， 将被触发，并...