React论坛 今日: 0|主題: 520|排名: 77 

引言 这几天帮朋友忙，用了一周时间，高仿了一个钉钉审批流。这个东西会有不少朋友有类似需求，就分享出来，希望能有所帮助。为了方便朋友的使用，设计制作的时候，尽量做到节点配置可定制，减少集成成本。如果您的项目有审批流需求，这个项目可以直接拿过去使用。React初学者也可以把本项目当做研读案例，学习并快速上手Re ...

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：空山 前言 由于笔者最近在开发中遇到了一个重复渲染导致子组件状态值丢失的问题，因此关于性能优化做了以下的分析，欢迎大家的交流 我们在日常的项目开发中往往会把页面 ...

参考资料： 深入React的生命周期(上)：出生阶段(Mount) 深入React的生命周期(下)：更新(Update) 精读《useEffect 完全指南》 React组件重新渲染理解 & 优化大全 React渲染顺序及useEffect执行顺序探究（含并发模式） 组件状态 同样还是可以把组件的状态分为mount、update和unmount。 mount：组件首次出现在页面中。React ...

背景 在项目中有集成低代码平台的想法,经过多方对比最后选择了 amis,主要是需要通过 amis 进行页面配置,导出 json 供移动端和 PC 端进行渲染,所以接下来讲一下近两周研究 amis 的新的以及一些简单经验,供大家参考. 什么是 amis amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效 ...

新的开始 2023年3月17号 react官方文档正式更新，还顺带搬了个家，连网址都变了。 被嫌弃的CRA 不知道小伙伴有没有留意到了没：曾经官方推荐 创建项目的脚手架工具 create-react-app已经从新文档中删除了，反而推荐了 React 社区的其它几个知名框架来创建项目。 在 Beta 版新文档中，还曾推荐过Vite 来搭建react项目，不 ...

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。。 本文作者：霁明 一、背景 1、业务背景 业务中会有一些需要实现拖拽的场景，尤其是偏视觉方向以及移动端较多。拖拽在一定程度上能让交互更加便捷，能大大提升用户体验。以业务中心子 ...

在这里，我想给你一个新的React项目入门的简要概述。我想反思一下优点和缺点，反思一下作为一个开发者所需要的技术水平，反思一下作为一个React开发者，每个启动项目都能为你提供哪些功能。最后，你将了解到针对不同需求的3种解决方案。 免责声明：从个人开发者的角度来看，我完全支持React团队在其新文档中推动的框架/SSR ...

1.react-flow  react-flow是一个用于构建基于节点的应用程序的库。这些可以是简单的静态图或复杂的基于节点的编辑器。同时react-flow支持自定义节点类型和边线类型，并且它附带一些组件，可以查看缩略图的Mini Map和悬浮控制器Controls. 2、react-flow 的安装 　　npm install react-flow-renderer # npm 　　yarn add ...

对于有多个应用系统的企业来说，每一个应用系统都有自己的用户体系，这就造成用户在切换不同应用系统时，就要多次输入账号密码，导致体验非常不好，也造成使用上非常不便。 针对这个问题，我们就可以采用单点登录的机制，只需用户登录一次，就可以实现切换到不同的应用系统，不需重新登录验证。 下面给大家推荐一套单点登录 ...

useEffect 先理解 useEffect 有助于学习 useMemo 和 useCallback。因为 useMemo 和 useCallback 的实现实际上都是基于 useEffect 的。 useEffect 是 React 中的一个很重要的 Hook，用于执行副作用操作。什么是副作用？简单来说，就是那些会改变函数外部变量或有外部可观察影响的操作。useEffect 允许你在函数组件中执行副 ...

useMemo 是 React 提供的一个用于优化组件性能的钩子函数。它可以缓存组件的计算结果，并在依赖项发生变化时重新计算。这可以避免在每次组件渲染时都重新计算相同的值，从而提高组件的性能。 useMemo 的语法如下： const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 其中，computeExpensiveVal ...

react-markdown的使用 安装 npm i react-markdown 基本使用 import ReactMarkdown from 'react-markdown' const markdownData = ` ### test header ` <RactMarkdown> {markdownData} </ReactMarkdown> 结合react-syntax-highlighter使得代码拥有语法高亮 npm i react-syntax-highlighter #安装react-syntax-hig ...

一、概要 1.1、跨平台开发技术 在移动端开发项目中。开发资源不够时，同时由两个团队维护安卓和IOS两套原生APP是成本很高的。此时，就需要选择一个同时支持多平台的客户端开发框架，能够使用一套代码，编译出多平台的APP。 这样一方面能够缩减开发人数，节省开发成本。另一方面由于代码统一，避免了不同平台版本分支，导致 ...

配置开发环境 脚手架工具create-react-app 储备知识：终端或命令行、代码编辑器 React官方中文文档 create-react-app 其是基于Node的快速搭建React项目的脚手架工具。 npx create-react-app testdemo cd testdemo npm i npx命令是npm v5.2.0引入的一条命令，无需安装脚手架包，就可以直接使用这个包提供的命令 yarn是Faceb ...

react管理状态的工具： 1、利用hooks进行状态管理； 2、利用Redux进行状态管理，这种方式的配套工具比较齐全，可以自定义各种中间件； 3、利用Mobx进行状态管理，它通过透明的函数响应式编程使得状态管理变得简单和可扩展。 2013 年 5 月 React 诞生。但 2015 年之前，大概都是 jQuery 的天下。2015 年 3 月 React 0.13.0 ...

React 作为前端使用最多的框架，必然是面试的重点。我们接下来主要从 React 的使用方式、源码层面和周边生态（如 redux, react-router 等）等几个方便来进行总结。 1. 使用方式上 这里主要考察的是，在开发使用过程中，对 React 框架的了解，如 hook 的不同调用方式得到的结果、函数组件中的 useState 和类组件的 state 的 ...

写这篇文章的目的是为了学习React Native开发打基础，能够更好的运行、测试原生应用，带来比模拟器更好的体验。 WSA（适用于Windows的Android™️子系统），全称Windows Subsystem for Android，它能够让你在Windows 11系统中安装和使用Android应用程序。 官方开发人员指南链接：适用于 Android™️ 的 Windows 子系统 | Mi ...

一、列表和keys 1.1、Lists and Keys （列表和键） 首先，我们回顾一下在javascript中怎么去变换列表。 下面了的代码，我们用到了数组函数的map方法来实现数组的每一个值变成它的2倍，同时返回一个新数组，最后打印出了这个数组： const numbers = [1,2,3,4,5]; const doubled = numbers.map(number=>number * 2); console ...

有两种方式： 使用electron-vite框架搭建，优点是环境齐全、搭建简单 自己一步步搭建。（推荐） 第一种：使用别人的框架直接搭建 容易 使用的框架为electron-vite 官网地址：https://cn-evite.netlify.app/ 1、安装electron-vite npm i electron-vite -D 2、创建项目 yarn create @quick-start/electron 这里项目名字 ...

前言 最近需要用到多包管理 monorepo 开发新项目，所以提前预研一下项目搭建。 monorepo(monolithic repository)是一种项目架构，就是用一个仓库管理多个项目（应用，库），react和babel的源码仓库都是用这种方式在管理。 优缺点略过，可以参考：精读《Monorepo 的优势》。 因为不需要 npm 发包之类的，所以没用 lerna，就 ...