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

正文从这开始~ 总览 当useEffect钩子使用了一个我们没有包含在其依赖数组中的变量或函数时，会产生"React Hook useEffect has a missing dependency"警告。为了解决该错误，禁用某一行的eslint规则，或者将变量移动到useEffect钩子内。 这里有个示例用来展示警告是如何发生的。 // App.js import React, {useEffect, useS ...

壹 ❀ 引 在过去的一段时间，我一直围绕项目中体验不好或者无效渲染较为严重的组件做性能优化，多少积累了一些经验所以想着整理成一片文章，下图就是优化后的一个组件，可以对比优化前一次切换与优化后多次切换的渲染颜色深度与按钮的切换速度： 关于减少组件无效渲染，与其说是提几点建议，不如说是在优化过程中所记录 ...

前言 老早就想写一篇关于React渲染的文章，这两天看到一篇比较不错英文的文章，翻译一下(主要是谷歌翻译，手动狗头)，文章底部会附上原文链接。 介绍 React 重新渲染的综合指南。该指南解释了什么是重新渲染，什么是必要的和不必要的重新渲染，什么情况下会触发 React 组件重新渲染。 还包括可以防止重新渲染重要的模式和一 ...

正文从这开始~ 总览 当我们尝试在JSX代码中，直接渲染对象或者数组时，会产生"Objects are not valid as a React child"错误。为了解决该错误，在JSX代码中，使用map()方法来渲染数组或者访问对象的属性。 下面是错误如何发生的示例。 export default function App() { const employees = [ {id: 1, name: 'Alice', ...

正文从这开始~ 总览 组件不能作为JSX组件使用，出现该错误有多个原因： 返回JSX元素数组，而不是单个元素。 从组件中返回JSX元素或者null以外的任何值。 使用过时的React类型声明。 返回单个JSX元素 下面是一个错误如何发生的示例。 // App.tsx // ⛔️ 'App' cannot be used as a JSX component. // Its return type 'E ...

有很多组件、根据类型不同，希望能够动态加载对应的组件。 现在的做法是，通过if else 或者switch 去渲染，但是这些组件都是一次性的全部加载进来了。 这样要写很多重复代码 ，想的思路是 通过 路径 传进去 ，找到 路径 对应的组件 作为 变量 放到 dom 里面 实现方式 const DevicePage: React.FC<props> = ({ children }) ...

正文从这开始~ 总览 在React中，从其他文件中导入组件： 从A文件中导出组件。比如说，export function Button() {} 。 在B文件中导入组件。比如说，import {Button} from './another-file' 。 在B文件中使用导入的组件。 命名导入导出 下面的例子是从一个名为another-file.js的文件中导入组件。 // 👇️ named export exp ...

正文从这开始~ 总览 在React中，通过表单提交获得input的值： 在state变量中存储输入控件的值。 在form表单上设置onSubmit属性。 在handleSubmit函数中访问输入控件的值。 import {useState} from 'react'; const App = () => { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = u ...

　　最近刚刚学了react-router@6，分享一下outlet的用法。 　　今天看到一段话是这样描述outlet的。说的是嵌套路由，可以保证子路由共享父路由的界面而不会覆盖。为此React提供了Outlet组件，将其用于父组件中可以为子路由的元素占位，并最终渲染子路由的元素。 　　这句话的意思大概就是说outlet是应用于嵌套路由的占位的 ...

React基础 React介绍 目标任务: 了解什么是React以及它的特点 React是什么 ​ 一个专注于构建用户界面的 JavaScript 库，和vue和angular并称前端三大框架，不夸张的说，react引领了很多新思想，世界范围内是最流行的js前端框架，最近发布了18版本，加入了很多新特性 ​ React英文文档（https://reactjs.org/） ​ Reac ...

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，下面会提，推荐尝 ...