非常好用的query库，目的是为了缓存后端api的结果，不用像以前一样，手动将结果一个一个存储到store，并且提供了一些非常好用的hook方法默认支持异步它并不是用于替代axios等请求库，而只是作为外层的封装，方便控制请求与结果安装配置1npm i @tanstack/react-query配置就是将其作为一个provider注入到app中12345678910constqueryClient =newQueryClient()functionApp() {return(// Provide the client to your App)}常用方法hookuseQuery用得最多的方法，用于获取数据的请求中useQuery如果命中缓存，那么onSuccess这些方法是不会被调用的默认在以下几种情况下，数据会自动重新获取(即会重新调用请求获取数据)重新挂载当前组件实例窗口重新聚焦网络重新连接配置了最短refetch时间需要为不同的请求，设置唯一的key值，如果是带参数的，可以作为数组的第二个参数第三个参数即可，甚至可以是数字、object等对象。对于enabled=false的请求，如果之前已经缓存过数据了，那么会直接使用缓存的数据，并且status === 'success', isSuccess=truequery function要么返回内容，要么抛出错 ...继续阅读 (51)

最近在项目发现了一些看起来很神奇的代码，一个组件 A 的方法通过props传到组件 B，然后到组件 C，再到组件 D，再到组件 E，最后到组件 D， 简直是千层饼😂。前言最近在项目发现了一些看起来很神奇的代码，一个组件 A 的方法通过props传到组件 B，然后到组件 C，再到组件 D，再到组件 E，最后到组件 D， 简直是千层饼😂。提问一番后知道了这种将属性深层传递的现象叫Prop Drilling，本文说明如何使用 React 的 Context API 避免这种现象。什么是 ContextContext 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但此种用法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。这些组件共享的以及变化不频繁的数据正是 Context 用武之地。如何使用 Context举个例子🌰 说明在线示例本文代码创建 Context首先用React.createContext ...继续阅读 (18)

最近需要在 Next.js 项目中使用 SVG 为可控的路径动画提供 Path。但是发现 Next.js 中默认不能直接引入 SVG 作为 React 组件。因为搜索到的解决方案很多，而且有些已经不具备时效性，所以在这里做个记录。 ...继续阅读 (25)

toc基础知识遇到的问题问题原因&分析如何解决问题？多子项目单独开发时，如何确定react版本，以及如何保证主项目加载子项目作为组件时，二者公用同一个react实例开发时，如何处理互相存在依赖子系统外置化加载react&react-dom;时，hot-reload失效tocstop基础知识#阅读之前你需要知道的知识包括什么是monorepomonorepo的一些应用场景webpack的配置的编写什么是pnpm遇到的问题#多子项目单独开发时，如何确定react版本？如何保证主项目加载子项目作为组件时，二者公用同一个react实例？开发时，如何处理互相存在依赖子系统？外置化加载react&react-dom;时，hot-reload失效问题原因&分析#为什么会引入问题[1]：这是因为使用用monorepo这个结构时，我们希望所有的子系统和主系统(系统的入口)，使用同一个react版本，以便系统整体的核心依赖的控制，并且减少多版本兼容带来的额外的bug。为什么会引入问题[2]：hooks的使用要求二者必须使用的是一个react实例对于context，它的使用也依赖于同一react实例为什么会引入问题[3]：当我们同时满足问题[1]和[2]时，react和react-dom将不能被打包到一个bandle包中，所以在webpack层面，我们需要使用external，排除react。与此同时， ...继续阅读 (27)

最近在写项目时，发现了关于 React18 的报错：“ReactDOM.render is no longer supported in React 18”，才发现它已经来了。 ...继续阅读 (18)

https://dev.to/jsun969/react-hook-dialog-use-hook-to-master-your-dialog-components-38jdIntroductionI made an open source lib: react-hoook-dialog (Welcome star 🌟🌟🌟)GitHub:https://github.com/jsun969/react-hook-dialogIt's a type-safe lib with react hooks to reuse your dialog components.With simple steps, we can use our dialog components everywhere. Let's start!Installationnpm install react-hook-dialogUsageIn this example, we use mui for the ui libYou can see the full example in codesandbox:https://codesandbox.io/s/rhd-mui-example-etwz20First, let's initialize our default dialog propslib/dialog.ts ...继续阅读 (12)

https://juejin.cn/post/7123002035439403045介绍最近做了一个开源库：React Hook Dialog (求 Star 🌟🌟🌟)GitHub:https://github.com/jsun969/react-hook-dialog这个库能够解决 React 中对话框组件的复用问题，用类型安全的方式复用对话框组件，很有效地提高开发效率安装npm install react-hook-dialog使用使用非常方便，并且只要声明一次对话框组件，就可以在各种地方复用以下这个例子用 Ant Design 作为 UI 库，完整的例子在：https://codesandbox.io/s/rhd-antd-example-qhj7zy首先创建一个文件，用来定义这个对话框的默认属性lib/dialog.tsimport { createDialogs, createDialogHooks } from 'react-hook-dialog'; type CustomDialogProps = { title: string; content: string; onOk: () => void; onCancel: () => void; }; // 初始化对话框组件 // 如果有多个对话框组件，为了类型安全，可以传入两个泛型 // 1.对话 ...继续阅读 (8)

[React Fragment](https://reactjs.org/docs/fragments.html) 支持**不添加额外节点**的情况下对子元素进行分组, 在文档上中 `Fragment` 的 Props 只有 `key`, 我们给 Fragment 添加任何事件监听例如 `onCli... ...继续阅读 (35)

最近看了一篇文章「[解决前端常见问题：竞态条件](https://juejin.cn/post/7098287689618685966)」([PDF](./archive.pdf)), 解释了什么是竞态条件以及如何解决这个问题, 不过觉得例子不是很完美, 所以用自己的例子复述一遍. ...继续阅读 (35)

前言​在 React 开发中如果不去管组件的重复渲染问题，项目稍微复杂一点性能将不堪入目，下面将介绍项目中最常见的例子及解决方案（仅 hooks 组件）。预先了解所用知识​React.memoReact.useCallbackReact.useMemouseMemoizedFn（利用 ref + useMemo 配合单例模式实现比 useCallback 更加好用的 hook，下面会提，推荐尝试）没错，只需使用上面 4 点即可解决大多数组件重复渲染问题，而如何合理去使用呢？例 1: 父组件状态更新导致子组件无效渲染​constParent=()=>{const[count,setCount]=useState(0);const[son1Count,setSon1Count]=useState(0);const[son2Count,setSon2Count]=useState(0);return({console.log("Parent render")}setCount((v)=>v+1)}>Parent+1setSon1Count((v)=>v+1)}>Son1+1setSon2Count((v)=>v+1)}>Son2+1Parent:{count});};constSon1=(props)=>{return({console.log("Son1 render")}Son1:{ ...继续阅读 (9)

https://juejin.cn/post/7097090281136357407i18next 是一个非常优秀的国际化库，能够与多种框架进行耦合使用。本文将介绍其在 React 业务中的使用。安装有三个包需要安装npm i i18next react-i18next i18next-browser-languagedetectori18next用来解析 i18n 文件，做一些初始化操作react-i18next在 React 中用 hook 调用 i18nexti18next-browser-languagedetector能够检测浏览器的语言初始化先创建locales文件夹，文件夹中创建en.json和zh.json分别对应英语和中文。在项目目录创建i18n.tsimport i18n from 'i18next'; import LanguageDetector from 'i18next-browser-languagedetector'; import { initReactI18next } from 'react-i18next'; import en from './locales/en.json'; import zh from './locales/zh.json'; i18n .use(initReactI18next) .use(Languag ...继续阅读 (16)

2023-02-07 更此文内容已过时，目前更推荐参考：https://github.com/alan2207/bulletproof-reacthttps://juejin.cn/post/7095980489160261639React 在使用时非常灵活，如果没有一个规范约束项目，在开发过程中会非常混乱，本文将介绍几个优秀的规范。文件类型介绍文件名和目录前，需要先简述一下几种通用的类型，用来区分文件的功能。component组件文件page如果有路由(React Router、NextJS 等)，则有页面文件util需要复用的工具函数helper一段特定逻辑，不是通用工具，可复用也可仅作为代码拆分片段hook自定义 React Hookconstant定义常量，大写+下划线命名CONSTANT_VALUE处理 index 文件在做组件或者页面的时候，你可能会划分组件，并把主组件用index.tsx导出。这样做的时候有一个好处就是可以按照文件夹名引入，从结构上看是很清晰的。但是事实上，在编辑器中会有多个index.tsx文件，开发时需要看文件所在的文件夹，非常难受。我的解决方案是，你的主组件应该和原来一样导出，index.ts文件二次导出主组件。你的index.ts应该这样写：export * from './MainComponent'; export { default } ...继续阅读 (12)

【摘要】简介 现在是大前端的时代，我们在本地开发 React 项目非常方便。这不是本文的重点，今天要分享一个话题是，如何为这些本地的项目，添加 https 的支持。为什么要考虑这个问题呢？主要有几个原因 如果该项目需要调用下层的 API， 并且该 API 是用 https的，则要求前端项目也用 https阅读全文 ...继续阅读 (48)

好久不見，在資服創新競賽結束後，我耍廢了好一段時間，更準確來說，從校內專題比賽結束後就開始耍廢了 XD，Hexo 的開發停滯這麼久真是不好意思 てへぺろ(・ω<)。我在暑假時開始進入Dcard，利用React+Redux+React Router寫了一個和現行網站完全分離的行動版網站，那時候Redux的文件還非常不齊全，很多東西都得自己摸索，不過拜@tomchentw所賜，解決了很多架構上的問題。然而在我跑去寫 V2 API 的這兩個月，Redux竟然從 1.0.0 升級到 3.0.4 了！React Router也終於推出 1.0.0 了！原本以為新版 Admin panel 也能沿用相同的配置，沒想到還是有一些部分得推倒重來，不禁令人感嘆前端變化之快。Redux先說說Redux究竟有什麼差別吧，其實Redux本身的修改倒還好，只要看Changelog就 OK 的程度，但是它周邊的東西就麻煩了。react-redux從 0.2.1 跳到 4.0.0，此外還多了一堆伙伴，Redux生態圈的形成也他媽的太快了吧！react-reduxreact-redux本身的 API 很簡單，但是Changelog卻能出現好幾次的Breaking Change，這東西是有這麼容易 Break 逆！主要的差別在於connectfunction 變得更好用了，過去只能用來綁定 props，現在也能綁定 ...继续阅读 (3)

## 使用 function 作为 useState 的初始值 计算机科学中存在一个[求值策略](https://zh.wikipedia.org/wiki/%E6%B1%82%E5%80%BC%E7%AD%96%E7%95%A5)的问题, 简单来说就是什么时候计算参数的值, 比如以下伪代码: ... ...继续阅读 (42)

JS的执行通常在单线程的环境中，遇到比较耗时的代码时，我们首先想到的是将任务分割，让它能够被中断，同时在其他任务到来的时候让出执行权，当其他任务执行后，再从之前中断的部分开始异步执行剩下的计算。所以关键是实现一套异步可中断的方案。那么我们将如何实现一种具备任务分割、异步执行、而且还能让出执行权的解决方案呢。React给出了相应的解决方案。背景React起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。该框架主要是一个用于构建用户界面的 JavaScript 库，主要用于构建 UI，对于当时双向数据绑定的前端世界来说，可谓是独树一帜。更独特的是，他在页面刷新中引入了局部刷新的机制。优点有很多，总结后react的主要特性如下：1. 1 变换框架认为 UI 只是把数据通过映射关系变换成另一种形式的数据。同样的输入必会有同样的输出。这恰好就是纯函数。1.2 抽象​实际场景中只需要用一个函数来实现复杂的 UI。重要的是，你需要把 UI 抽象成多个隐藏内部细节，还可以使用多个函数。通过在一个函数中调用另一个函数来实现复杂的用户界面，这就是抽象。1.3 组合为了达到可重用的特性，那么每一次组合，都只为他们创造一个新的容器是的。你还需要“其他抽象的容器再次进行组合。”就是将两个或者多个容器。不同的抽象合并为一个。React 的核心价值会一直 ...继续阅读 (47)

JS的执行通常在单线程的环境中，遇到比较耗时的代码时，我们首先想到的是将任务分割，让它能够被中断，同时在其他任务到来的时候让出执行权，当其他任务执行后，再从之前中断的部分开始异步执行剩下的计算。所以关键是实现一套异步可中断的方案。那么我们将如何实现一种具备任务分割、异步执行、而且还能让出执行权的解决方案呢。React给出了相应的解决方案。背景React起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。该框架主要是一个用于构建用户界面的 JavaScript 库，主要用于构建 UI，对于当时双向数据绑定的前端世界来说，可谓是独树一帜。更独特的是，他在页面刷新中引入了局部刷新的机制。优点有很多，总结后react的主要特性如下：1. 1 变换框架认为 UI 只是把数据通过映射关系变换成另一种形式的数据。同样的输入必会有同样的输出。这恰好就是纯函数。1.2 抽象​实际场景中只需要用一个函数来实现复杂的 UI。重要的是，你需要把 UI 抽象成多个隐藏内部细节，还可以使用多个函数。通过在一个函数中调用另一个函数来实现复杂的用户界面，这就是抽象。1.3 组合为了达到可重用的特性，那么每一次组合，都只为他们创造一个新的容器是的。你还需要“其他抽象的容器再次进行组合。”就是将两个或者多个容器。不同的抽象合并为一个。React 的核心价值会一直 ...继续阅读 (52)

导入方式在 19/20 版本，默认导出可能不可用。12import*asReactfrom'react';import*asReactDOMfrom'react-dom';组件 props 类型12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061typeCommonType={};typeComponentProps={count:number;message:string;disabled:boolean;status:'success'|'waiting'|'error';objAttr:{};objAttrArr:{id:string;title:string;}[];dict1:{[key:string]:CommonType;};dict2:Record;// 同 dict1onSth:Function;onChange():void;onClick:()=>void;onSubmit(event:React.FormEvent):void;onContextMenu:(event:React.MouseEvent)=>void;optional?:unknown;};/*** 获取元素的 props ...继续阅读 (9)

React Query使用stale-while-revalidate缓存机制，并且存在后台刷新数据的机制。因此状态检查就变的非常重要。本文主要说明后台刷新数据时，会带来的一些问题和解决方法。More… ...继续阅读 (64)

我可以认真的说，看完这篇文章，你将掌握：componentDidCatch 原理；Suspense 原理；异步组件原理。不可能的事我的函数组件中里可以随便写，很多同学看到这句话的时候，脑海里应该浮现的四个字是：怎么可能？因为我们印象中的函数组件，是不能直接使用异步的，而且必须返回一段 JSX 代码。那么今天我将打破这个规定，在我们认为是组件的函数里做一些意想不到的事情。接下来跟着我的思路往下看吧。首先先来看一下 JSX，在 JSX 中代表 DOM 元素，而代表组件，Index 本质是函数组件或类组件。透过现象看本质，JSX 为 ReactElement 的表象，JSX 语法糖会被 Babel 编译成 ReactElement 对象，那么上述中：不是真正的 DOM 元素，是 type 属性为 div 的 element 对象；是 type 属性为类或者组件本身的 element 对象。言归正传，那么以函数组件为参考，Index 已经约定俗成为这个样子：123456789101112functionIndex() {/*** 不能直接的进行异步操作* return 一段 JSX 代码*/return(Beefribsporkchopcowcornedbeefpastramisalamishoulderfatbackporchettaalcatra.);}如果不严格按照这个格式写，通过形 ...继续阅读 (13)

写程序，永远都要面对数据结构和算法。使用React Query去获取数据时，很多时候我们也需要进行数据转化，这篇博文就是介绍在使用React Query时如何进行数据转换。More… ...继续阅读 (65)

eslint-plugin-react-memo的作者为了阐述Memo的重要性而写的博文，用来说明为什么使用Memo是一个非常明智的选择More… ...继续阅读 (54)

文档目录结构 1 创建app 1.1 安装 Meteor 1.2 创建 Meteor 项目 1.3 创建任务组件 1.4 创建任务示例 1.5 渲染任务示例 1.6 移动端外观 1.7 更换热模块 2 集合 2.1 创建任务集合 2.2 初始化任 ...继续阅读 (31)

调用 ReactDOM.render 发生了什么？确定应用渲染方式；创建 fiberRoot 和 rootFiberNode，并将两者用指针指向彼此；向 rootFiberNode 绑定自身的更新队列；清空 container 里的内容；向 container 绑定原生事件；将 render 的第三个参数的 this 指向应用实例并调用；初始化完成后，创建 update，并将 fiber 对应的组件作为 payload；将 update 与 fiberNode 相关联，fiberNode 对应的 update 组成循环链表；调用 scheduleUpdateOnFiber 开始渲染工作。123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 ...继续阅读 (17)

最近在用 React Native 写一个给头像加国旗的 App，主要是参加水个竞赛，详见jsun969/chinese-flag-avatar-builder因为涉及到了图像处理，React Native 并不能使用原生的 DOM，于是找到了这个项目iddan/react-native-canvas因为他的操作和原生 canvas 很相似所以就没写文档，导致用下来的感觉就是别的库读文档，这个库读 Issues我需要把操作完的 canvas 导出成 base64，首先想到了的是原生的canvas.toDataUrl()。事与愿违，首先他这个调用是异步的，而且如果用的话会报一个The operation is insecure的错既然你insecure，那八成是crossOrigin炸了，看了一下react-native-canvas#143，加了一句img.crossOrigin = 'anonymous';然后就遇到了另一个问题，图片不显示了继续翻 Issue，找到了这么个 commentreact-native-canvas#77#821788006最后用 expo 自带的转换器把图片转换成 base64，就显示了const [{ localUri }] = await Asset.loadAsync(frameImages[frameIndex]); const frameB ...继续阅读 (19)

自从 2010 年第一份工作接触了前后端半分离的开发方式之后，在后面的这些年里，对前端的组件化开发有了更全面一点的认识，组件化在我们的前端开发中，对提高开发效率、代码的可维护性和可复用性有很大帮助，甚至对跟设计师沟通的效率和企业的品牌形象都有着深刻的影响。这篇文章就把我在开发中总结的一些组件化开发经验分享一下。示例中的所有代码都是伪代码，你可以按照实际情况应用到 React 或 Vue 的项目中。 ...继续阅读 (32)

Cusdis 是一个界面清爽、注重隐私的轻量级 (~5kb gzip) 评论系统，可以很方便地与 React、Vue 或其他博客系统结合，并且还提供了一个后台来管理所有的评论。 由于 Cusdis 自称是 Disqus 的替代方 ...继续阅读 (18)

Cusdis 是一个界面清爽、注重隐私的轻量级 (~5kb gzip) 评论系统，可以很方便地与 React、Vue 或其他博客系统结合，并且还提供了一个后台来管理所有的评论。 由于 Cusdis 自称是 Disqus 的替代方 ...继续阅读 (14)

Fiber是Facebook的React框架核心算法的2年重构的产物，Fiber reconciler。并且在React16中启用。more这里笔者默认读者都了解过React和Vue中都有的虚拟Dom(vnode)概念，同时也对这类框架的更新原理，diff算法有一定的认知。简单来说，本文前置知识要求：前端基本知识，html，css，jsReact虚拟dom/vnodeDiff算法Fiber听说React团队在实现Fiber过程中考虑使用协程来实现，但是由于不适合/工程量太大而没有最终使用。React在引入Fiber之前，由于其Diff算法需要递归去判断来对视图层做更新，就算实现了O(n)复杂度的Diff算法，但是由于其需要完成一次Diff才能更新视图层，所以导致当有递归层级非常深的组建树需要进行更新时，会产生用户感知非常明显的卡顿，这个问题就是Fiber解决的核心问题。前端各种技术最根本的目的都是为了提高用户体验React通过Fiber架构，让Reconcilation过程变成可被中断。'适时'地让出CPU执行权，通过这种方式，能够让浏览器及时地响应用户的交互，用户拥有了更好的体验，编译器也有机会进行编译优化(JIT)及进行热代码优化。实现Fiber的数据结构是链表，可以说，React升级到Fiber，就是一个数据结构课可能很常见做过的，递归转循环的过程。因为递归变成了循环，所以能 ...继续阅读 (41)

在做完网站之后，我们需要把它部署到服务器上。服务器就是一台远程的虚拟电脑，在它上面安装服务器程序后，可以把我们部署的网站呈现给访问网站的用户。比较专业且大型的服务器提供商有阿里云、腾讯云、华为云等。假如你要搭建的是个人网站、博客之类的，那么可以选择一个比较基础的配置，这样也比较便宜。 ...继续阅读 (35)