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

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，就 ...

一、概要 （1）每个单页应用其实是一系列的 JS 文件，当用户请求网站时，网站返回一整个(或一系列)的 js 文件和 HTML，而当用户在某个页面内点击时，你需要告诉浏览器怎么加载另一个页面地址。单页应用中通常只有一个 index.html 文件的，所以浏览器自带的 <a> 链接 tag 并不能用来做单页应用的跳转， ...

一、JSX 1.1、什么是JSX? JSX = JavaScript XML，这是React官方发明的一种JS语法（糖） 概念：JSX是 JavaScript XML（HTML）的缩写，表示在 JS 代码中书写 HTML 结构 设想如下变量声明： const element = <h1>Hello, world!</h1>; 这个有趣的标签语法既不是字符串也不是 HTML。 它被称为 JSX，是一个 JavaScript 的语法扩 ...

一、概要  React是用于构建用户界面的MVVM框架。 1.1、介绍 React 是 Facebook 开发的一款 JavaScript 库，而 React 被建造是因为 Facebook 认为市场上所有的 JavaScript MVC 框架都不能满足他们的扩展需求， 由于他们非常巨大的代码库和庞大的组织，使得&nbs ...

工作用的技术栈主要是React hooks + TypeScript。使用三月有余，其实在单独使用 TypeScript 时没有太多的坑，不过和React结合之后就会复杂很多。本文就来聊一聊TypeScript与React一起使用时经常遇到的一些类型定义的问题。阅读本文前，希望你能有一定的React和TypeScript基础。 一、组件声明 在React中，组件的声明方式有两 ...

其他章节请看： react 高效高质量搭建后台系统 系列 权限 本系列已近尾声，权限是后台系统必不可少的一部分，本篇首先分析spug项目中权限的实现，最后在将权限加入到我们的项目中来。 spug 中权限的分析 权限示例 比如我要将应用发布模块的查看权限分给某用户（例如 pjl），可以这样操作： 在角色管理中新建一角色（例 ...

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 前言 单元测试是一种用于测试“单元”的软件测试方法，其中“单元”的意思是指软件中各个独立的组件或模块。开发者需要为他们的代码编写测试用例以确保这些代码可以正常使用。 在我们的 ...

壹 ❀ 引 本文属于我在公司的一篇技术分享文章，它在我之前 React性能优化，六个小技巧教你减少组件无效渲染一文的基础上进行了拓展，增加了工具篇以及部分更详细的解释，所以内容上会存在部分重复，以下是分享的原文。 在过去一段时间，好像每次代码走读大家都对于useMemo、useCallback以及memo的使用都会存在部分疑惑， ...

其他章节请看： react 高效高质量搭建后台系统 系列 系统布局 前面我们用脚手架搭建了项目，并实现了登录模块，登录模块所依赖的请求数据和antd（ui框架和样式）也已完成。 本篇将完成系统布局。比如导航区、头部区域、主体区域、页脚。 最终效果如下： spug 中系统布局的分析 spug 登录成功后进入系统，页面分为三大块 ...

一、什么是useContext 在 React class 式中父组件向子组件传递参数可以通过 props ，context。但是在函数式组件中需要向多层组件传递数据时，此时就可以使用 useContext/ 二、useContext的作用 1.useContext可以帮助我们跨越组件层级直接传递变量，实现数据共享。 这里要注意的是，很多同学觉得可以使用useContext结合us ...

其他章节请看： react 高效高质量搭建后台系统 系列 登录 本篇将完成登录模块。效果和 spug 相同： 需求如下： 登录页的绘制 支持普通登录和LDAP登录 登录成功后跳转到主页，没有登录的情况下访问系统会重定向到登录页，登录成功后再次回到之前的页面。系统会话过期后，请求会重定向到登录页。 Tip：退出登录在进入系 ...