前言现在不少应用都是采用了混合开发模式，不论是原生加RN,或是原生加Flutter,或是原生加H5。原生实现主业务线，其他部分可以借助跨平台方案开发，提高开发效率，或者实现热更新，调高业务迭代效率。下面简单介绍一下Android原生集成最新RN版本的过程。添加package.json文件首先在一个正常编译运行的原生APP根目录下执行yarn init命令，按提示填写基本信息后会在项目根目录下，创建一个package.json文件。添加JavaScript依赖,生成node_modules然后，使用如下命令添加React和React Native运行环境的支持脚本。yarn add react react-native命令执行完成后，所有JavaScript依赖模块都会被安装到项目根目录下的node_modules/目录中。注意：node_modules这个目录我们原则上不复制、不移动、不修改、不上传，随用随装，同时把node_modules/目录记录到.gitignore文件中（即不上传到版本控制系统，只保留在本地）。接下来，在package.json文件中配置启动RN Metro服务的脚本，即script脚本，文件全部内容如下。项目根目录package.json文件{ "name": "AndroidDemo", "version": "1.0.0", "main": ...继续阅读 (30)

目前我用到的react-native平台对native支持最好的表格组件了安装配置12345678npm install --save victorynpm install --save victory-nativereact-native-svg # react-native，注意还需要执行pod install#react-native需要忽略下面的warningLogBox.ignoreLogs(["Require cycle: node_modules/victory",]);ChartsVictoryArea每个横坐标都对应两个纵坐标形成一个area，也可以不提供y0，默认就从y最小值开始12345678910111213}// 指那一块区域而不是某个点interpolation={'basis'}// 默认是linear折线，basis平滑曲线，其他的其实都有差别，但说不上名字了，可以挨个试试：natural/basis/bundle/cardinal/catmullRom/monotoneY/monotoneX/step(电子信号那种)/stepAfter/stepBefore/>Area颜色渐变12345678910111213141516171819202122232425import{Defs,Line ...继续阅读 (67)

Context本篇我们讲 Context，Context 可以实现跨组件传递数据，大部分的时候并无需要，但有的时候，比如用户设置 了 UI 主题、地区偏好，如果从顶层一层层往下传反而有些麻烦，不如直接借助 Context 实现数据传递。老的 Context API基础示例在讲最新的 API 前，我们先回顾下老的 Context API：class Child extends React.Component { render() { // 4. 这里使用 this.context.value 获取 return{this.context.value}} } // 3. 子组件添加 contextTypes 静态属性 Child.contextTypes = { value: PropTypes.string }; class Parent extends React.Component { state = { value: 'foo' } // 1. 当 state 或者 props 改变的时候，getChildContext 函数就会被调用 getChildContext() { return {value: this.state.value} } render() { return () } } ...继续阅读 (32)

从问题出发我被问过这样一个问题：想要实现一个useTitle方法，具体使用示例如下：function Header() { const [Title, changeTitle] = useTitle(); return (changeTitle('new title')}>) }但在编写useTitle代码的时候却出了问题：function TitleComponent({title}) { return{title}} function useTitle() { const [title, changeTitle] = useState('default title'); const Element = React.createElement(TitleComponent, {title}); return [Element.type, changeTitle]; }这段代码直接报错，连渲染都渲染不出来，如果是你，该如何修改这段代码呢？元素与组件其实这就是一个很典型的元素与组件如何区分和使用的问题。元素我们先看 React官方文档中对 React 元素的介绍：Babel 会把 JSX 转译成一个名为React.createElement()函数调用。以下两种示例代码完全等效：const element =Hello, world ...继续阅读 (32)

本项目是 React 基于 Monaco Editor 实现的 Web VSCode Demo，它的主要功能是允许在浏览器中编写 TypeScript/JavaScript 并直接运行，除此之外，它还包含如下功能：支持部分语言服务，例如 TS 类型检查、代码补全、代码错误检查、代码格式化等；编辑器支持 ES6 模块语法import/export；多个 Tab 项，可以新增和删除；Tab 页拖拽排序；控制台输出与显示；编辑历史回退等。接下来让我们一起来了解下它是如何工作的吧。使用 Monaco EditorMonaco Editor 是一个 Web 编译器，由 Erich Gamma 带领的团队所开发，关于 Monaco Editor 可以追溯到 2011 年，最早的 Monaco 是被广泛用于微软内部及外部一些 Web 产品的编辑器控件，为人所熟知的是早期的 Visual Studio Online 。VS Online 是 2013 年就已经上线运营的产品，界面与较老版本的 VS Code 非常类似，可以说 VS Code 是将 VS Online 搬到了桌面端，而新的 Github Codespaces 又将其搬到了 Web 端。在 React 项目中使用Monaco Editor，有两个比较成熟的组件库react-monaco-editor和@monaco-editor/r ...继续阅读 (25)

在我负责的业务里面, 有个项目用于存放运营活动页面, 通常情况下每次运营活动都会相应地搭配一个或数个活动页面. 这个项目使用 react 构建 UI, 活动页面没有 SEO 的需求, 所以采用的是浏览器渲染. 同时使用前端路由, 每个活动页面都是 react-router 的子路由. 随着时间的增长... ...继续阅读 (49)

非常好用的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要么返回内容，要么抛出错 ...继续阅读 (70)

最近在项目发现了一些看起来很神奇的代码，一个组件 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 ...继续阅读 (21)

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

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。与此同时， ...继续阅读 (36)

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

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 ...继续阅读 (18)

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.对话 ...继续阅读 (14)

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

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

前言​在 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:{ ...继续阅读 (12)

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 ...继续阅读 (21)

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 } ...继续阅读 (18)

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

好久不見，在資服創新競賽結束後，我耍廢了好一段時間，更準確來說，從校內專題比賽結束後就開始耍廢了 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，現在也能綁定 ...继续阅读 (10)

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

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

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

导入方式在 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 ...继续阅读 (12)

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

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

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

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

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

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