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

github：https://github.com/securingsincity/react-ace star ： 3.6k npm : weekly downloads 280,045 DEMO of React Ace: https://securingsincity.github.io/react-ace/ install npm install react-ace ace-builds // or yarn add react-ace ace-builds Basic Usage import React from "react"; import { render } ...

一直在用react进行编码，下面来看一下react框架的源码，了解一下react框架的思路。 首先，看下packages/react文件夹下的代码，也就是React 通过packages/react/index.js,可以大致了解到有哪些常用的react api export { __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, act as unstable_act, Children, Compone ...

最近我们公司接到一个客户的需求，要求为正在开发的项目加个功能。项目的前端使用的是React，客户想添加具备Excel 导入/导出功能的电子表格模块。 经过几个小时的原型构建后，技术团队确认所有客户需求文档中描述的功能都已经实现了，并且原型可以在截止日期前做好演示准备。但是，在跟产品组再次讨论客户需求时，我们发现 ...

前言 使用 Vite 已经有两年了，期间使用它开发过单页面应用，也开发过浏览器扩展插件，对比日常工作中用到的 webpack 构建速度大幅提升，开发体验也好很多。 虽然相比于 webpack 来说简单了很多，但是仍然有一些配置需要记录一下，以便之后可以快速搭建一个本地开发构建的环境。 使用 create-vite 脚手架生成基础模板 运行 ...

本项目主要基于Elux+Antd构建，包含React版本和Vue版本，旨在提供给大家一个简单基础、开箱即用的后台管理系统通用模版，主要包含运行环境、脚手架、代码风格、基本Layout、状态管理、路由管理、增删改查逻辑、列表、表单等。 为保持工程简单清爽，方便二次开发，只提供基本版式和通用组件，不集成各种眼花缭乱的组件，需 ...

前言 前段时间我需要实现大文件上传的需求，在网上查找了很多资料，并且也发现已经有很多优秀的博客讲了大文件上传下载这个功能。 我的项目是个比较简单的项目，并没有采用特别复杂的实现方式，所以我这篇文章的目的主要是讲如何最简单地实现大文件上传与下载这个功能，不会讲太多原理之类的东西。 大文件上传 在实际场景中 ...

前言 最近利用闲暇时间把webpack系统的学习了下，搭建出一个react环境的脚手架，写篇文章总结一下，帮助正在学习webpack小伙伴们，如有写的不对的地方或还有可以优化的地方，望大佬们指出，及时改正。 git项目地址：https://github.com/handsomezyw/my-webpack 初始化项目 新建文件夹起名为my-webpack（文件夹名字任意取 ...

前言： 　　实现一个在react项目中页面展示代码编辑器的效果。 codemirror： 　　使用JavaScript为浏览器实现的多功能文本编辑器。codemirror作用：专门用于编辑代码，并带有实现更高级编辑功能的多种语言模式和附加组件 实现效果       1. 首先从react-codemirror2中引入Codemirror组件　　 import {UnCo ...

正文从这开始~ 总览 导致"Invalid hook call. Hooks can only be called inside the body of a function component"错误的有多种原因： react和react-dom的版本不匹配。 在一个项目中有多个react包版本。 试图将一个组件作为一个函数来调用，例如，App()而不是<App />。 在类里面使用钩子，或者在不是组件或自定义钩子的函 ...

正文从这开始~ 总览 当我们有条件地使用useState钩子时，或者在一个可能有返回值的条件之后，会产生"React hook 'useState' is called conditionally"错误。为了解决该错误，将所有React钩子移到任何可能油返回值的条件之上。 这里有个例子用来展示错误是如何发生的。 import React, {useState} from 'react'; export def ...

正文从这开始~ 总览 当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 ...