带你使用 React、Vite、TypeScript、Less、Zustand、Ant Design 开发 Chrome V3 插件
一、使用 创建 项目 选择 和 进入项目，并进行 安装 此时项目文件夹目录为： 二、修改 项目 因为我们是开发 插件，需要 页面等文件，所以需要对之前的项目进行删除，并添加我们自己的配置 1\. 项目修改 1. 删除项目根目录下的 文件 2. 删除 目录下的 3. 删除根目录下的 文件夹 4. 在根目录下创建 文件，此乃插件入口文件 5. 创建 页面：在 目录下创建 文件夹， 文件夹中创建 文件夹， 文件夹下创建 文件（这些新建的文件内...
深入了解zustand（从使用到源码）
如何使用 先来简单看看如何使用 这是官网给我们的一个例子 我们可以看到他是用一个create来创建一个store的 之前我已经搭建好了调试环境 直接开看🤫，很易读大家可以跟着文章一起来调试着看 为了方便大家看我帮大家剔除了源码中的ts ，源码中的ts还是蛮复杂的🙃 创建store 可以看到create接受一个createState就是我们之前的传入的函数 因为我们传入的createState是个函数所以会走到里createImpl(...
React-router6.x最新版本keepAlive解决方案
前言 笔者百无聊赖，把项目中的react router升级到最新版本来体验体验 令我惊讶的是，最新版本的router官网甚至连翻译都没有，也许是我没找到，官网还是全英的 因为项目中react是18，router又升级到了6.8这就导致了以前用的react router cache route不起作用了 于是笔者网上找了许久都没找到现成的解决方案，所以就只能自己边看文档边摸索了 最后算是解决了keepAlive，所以希望能帮助到遇到相同问...
React flushSync更新时同步更新 dom
一般情况下，State 更新是异步更新 dom 的，比如下边这个例子 这时候可以使用 \ dom 提供的 flushSync，使得同步更新 dom： 但会有一个点：虽然调用 flushSync 同步更新 dom，但是组件的 state 更新仍然是异步的；
React中的flushSync与Vue中的nextTick的比较
中的flushSync与Vue中的nextTick是两种用于处理异步更新的机制。它们在React和Vue这两个流行的前端框架中起着重要的作用。 首先，让我们来看看flushSync。在React中，当需要更新UI时，React会将更新操作放入一个队列中，然后异步地执行这些更新操作。但是有时候，我们希望立即执行这些更新操作，而不是等待异步执行。这时就可以使用flushSync。flushSync会立即执行队列中的所有更新操作，确保更新是同...
介绍React Fiber架构的原理和工作模式
首先，我们先聊聊React的基本组成：当我们写React组件并使用JSX时，React在底层会将JSX转换为元素的对象结构。例如： 上述代码会被转换为以下形式： 为了将这个元素渲染到DOM上，React需要创建一种内部实例，用来追踪该组件的所有信息和状态。在早期版本的React中，我们称之为“实例”或“虚拟DOM对象”。但在Fiber架构中，这个新的工作单元就叫做Fiber。 所以，在本质上， Fiber是一个JavaScript对象...
你可能不知道的React-Router
前言 一不小心想起来了账号密码， 就写点什么吧。 这一年多也是经历了裁员 \ gap year 找工作 找到工作 还没找到工作，从最开始的玩的不亦乐乎，到后面的找工作怀疑人生，只能说一手烂牌，打的更是稀烂。正好最近面试有被问到React Router的实现，其实好久没看过源码了，所以面试回来又去简单看了下。 前端路由 前端路由一般分为 hash 路由和 history 路由两种模式，hash 模式下监听 ，history 模式监听 ，从...
一次性推荐20个React组件库
🎉 react grid layout react grid layout 是一个用于创建网格布局的 React 库，它允许您以栅格形式布局组件，并支持拖拽和调整大小等交互功能，使得页面布局更加灵活和可定制。 🎉 react beautiful dnd react beautiful dnd 是一个用于实现漂亮的拖拽和重新排序功能的 React 库，它提供了易于使用的 API 和灵活的配置选项，让您可以轻松地实现拖拽交互。 🎉 r...
useEffect依赖引用类型
如果你是一个入行不久的前端开发，面试中多半会遇到一个问题： 你认为使用React要注意些什么？ 这个问题意在考察你对React的使用深度，因为沉浸式地写过一个项目就会发现，不同于一些替你做决定的框架，“潜规则”丰富的React远比看上去要难相处。 React中主要有两类坑点，一种是让你措手不及，结果对不上预期，严重影响开发进度，另一种更为头痛，表面风平浪静，水下暗流涌动。 官方文档的触角只伸到Demo级别，并不涉及花样百出的最差实践，所...