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

Vite是随着Vue3一起发布的一款新型前端构建工具，能够显著的提升前端开发体验，它主要由两部分组成： （1）一个开发服务器，它基于**原生ES模块提供了丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。 （2）一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。 ...

原文链接：https://bobbyhadz.com/blog/react-loop-through-object 作者：Borislav Hadzhiev 正文从这开始~ 遍历对象的键 在React中循环遍历对象： 使用Object.keys() 方法得到对象的键组成的数组。 使用map()方法来迭代键组成的数组。 export default function App() { const employee = { id: 1, name: 'Bob' ...

前言 我们常用使用 create-react-app 新建 React 项目，它帮我们配置好了开箱即用的 Webpack 配置。但是如果我们要重头搭建一个使用 Webpack 打包的 React 项目，就必须要学习 Webpack 的用法了。 在本文中，你会了解到： Webpack 是什么 从开发到构建到发布发生了什么事 对前端项目的构建流程有一个简单的概念 首先，从 ...

简单介绍一下Suspense Suspense主要用来解决网络IO问题，它早在2018年的React 16.6.0版本中就已发布。它的相关用法有些已经比较成熟，有的相对不太稳定，甚至经历了重命名、删除： 在render函数中，我们可以写入一个异步请求，请求数据 react会从我们缓存中读取这个缓存 如果有缓存了，直接进行正常的render 如果没有缓存 ...

壹 ❀ 引 虚拟DOM（Virtual DOM）在前端领域也算是老生常谈的话题了，若你了解过vue或者react一定避不开这个话题，因此虚拟DOM也算是面试中常问的一个点，那么通过本文，你将了解到如下几点： 虚拟DOM究竟是什么？ 虚拟DOM的优势是什么？解决了什么问题？ 虚拟DOM的性能比操作原生DOM要快吗？ react中的虚拟DOM是如何生成 ...

在做web项目中，有时候会遇到pdf导出的需求，现根据之前在公司的React项目中遇到的导出PDF需求，整理一个demo出来。 导出PDF需要用到两个依赖包：html2canvas、jspdf 1、安装html2canvas和jspdf npm install html2canvas -S / yarn add html2canvas -S npm install jspdf -S / yarn add jspdf -S   2、把导出PDF封装 ...

前言 一个前后端分离的项目，前端人员需要对接后端的接口。如果在后端的接口没有开发好，或者没有测试版可以对接的情况下，前端人员也不能坐等后端接口写好后再开始开发。 一个项目的，理想情况下接口的规范应该是前后端人员在开发之前就已经协商好的，如请求内容，返回内容等。在后端接口还不能供前端人员使用的时候，前端 ...

// 轮询接口 import { useCallback, useRef, useEffect } from "react"; const sleep = (time) => { return new Promise((resolve) => setTimeout(resolve, time)); }; const useUnMount = (fn) => { useEffect( () => () => { fn(); }, [fn] ); }; const usePolling = (polling) => { const ...

一、前言 此篇内容较多，我是一步一个脚印(坑)，以至于写了好久，主要是这几部分：后台升级 .NET6  VS2022、前台升级Ant Design Pro V5 、前后台联调 IdentityServer4 实战，以及各部分在Linux环境下部署等等。 二、后台升级.NET6 WebApi和类库都升级到.NET6，依赖包都升级到6.0以上最新，好像没什么感知，略感ea ...

前言 在 React 开发中如果不去管组件的重复渲染问题，项目稍微复杂一点性能将不堪入目，下面将介绍项目中最常见的例子及解决方案（仅 hooks 组件）。 预先了解所用知识 React.memo React.useCallback React.useMemo useMemoizedFn（利用 ref + useMemo 配合单例模式实现比 useCallback 更加好用的 hook，下面会提，推荐尝 ...

前言 本文是作为一个额外内容，主要介绍 tailwindcss 的用法 tailwindcss 是一个功能类优先的 CSS 框架，我在以前的文章里有描述为什么使用功能类优先：为什么我在 css 里使用功能类优先 在上一章中我们的 react 组件有了一个简单的样式，在这一篇我们将使用 tailwindcss 来重新编写它的样式。我将使用我们上一章的代码为例 ...

本项目是基于taro框架的react语言开发，项目中有需要做图片上传的需求，需要支持多图上传，支持图片删除，支持自动添加新增按钮，支持预览功能，支持显示默认图片等功能 要实现以上功能，使用小程序自带的上传组件已经不能够满足项目需求了，于是抱着学习的态度，开始动手撸一个图片上传框架 目录介绍布局操作图片添加图片 ...

其他章节请看： react实战 系列 My Dashboard 上一篇我们在 spug 项目中模仿”任务计划“模块实现一个类似的一级导航页面（”My任务计划“），本篇，我们将模仿“Dashboard”来实现一个仪表盘“My Dashboard”。 主要涉及 antd 的 Grid、Card、Descriptions等组件、bizcharts 的使用、moment 日期库和页面适配。 注：实现 ...

本文使用 React-i18next 库结合 React， 介绍如何在 React 中配置使用国际化。 官方地址：i18next | react-i18next 简介 react-i18next 是基于 i18next 的一款强大的国际化框架，可以用于 react 和 react-native 应用； react-i18next 特点： 提供多种组件可以在hoc, hook 和 class 的情况下进行国际化操作； 基于 i18next ...

官方文档：Refs 转发 语法 React.forwardRef(render); 上面的代码中，forwardRef 函数接收一个名为 render 的函数(也可以将 render 方法理解成一个函数组件)，返回值是 react 组件； const render = (props, ref) => { return <></>; } 上面的代码中，render 函数接收 2 个参数，第一个参数为 props(父组件传递的参数对 ...

目录结合React+TypeScript进行Electron开发1. electron基本简介为什么选择electron？2. 快速上手2.1 安装React(template为ts)2.2 快速配置React2.3 安装electron2.4 配置main.js、preload.js和package.json文件2.5 运行electron项目2.6 打包项目3. 自动刷新页面4. 主进程和渲染进程5.定义原生菜单、顶部菜单5.1 自定义菜单5 ...

前言 项目到一段落，先来记录一下，本文以前端新手的角度记录React、TypeScript、Taro相关技术的开发体验以及遇到的问题和解决方法。 之前总说要学React（这篇博客：代码使我头疼之React初学习），这次项目需要做H5前端+小程序，我终于能用上React了~ 使用React的开发框架之前就听过京东的Taro，所以就这个了，直接开码。 ...

React Flow流程组件用起来还是挺简单的,能满足一些基本的流程配置.可以通过自定义配置节点实现不同需求 官网地址: https://reactflow.dev/docs/introduction/ 可以浏览一遍基本API在结合官网给的例子,快速开发.官网给了很多例子,很方便 效果图: 使用: 安装包 yarn add react-flow-renderer -D index.tsx ...

官方文档 一个神奇的链接: React Router 官方文档 安装 运行以下命令安装React Router: npm install react-router-dom@6 --save 注意：react-router-dom 包含所有内容，导入组件时应该从react-router-dom中导入，而不应该从 react-router中导入，否则，会意外地在应用中导入不匹配的库版本； 基本用法 在Web应用程序中开 ...

其他章节请看： 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识，而真实项目通常是基于脚手架进行开发。 本篇首先通过 react 脚手架创建项目，分析其目录结构，接着编写第一个组件、解决样式覆盖，最后配置代理 proxy 以及通过消息发布与订阅解决兄弟组件之间的通信问 ...