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

一、概要 （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：退出登录在进入系 ...

总览 当我们把多个子元素传递给一个只期望有一个React子元素的组件时，会产生"React.Children.only expected to receive single React element child"错误。为了解决该错误，将所有元素包装在一个React片段或一个封闭div中。 这里有个示例来展示错误是如何发生的。 // App.js import React from 'react'; function Butto ...

总览 产生"Too many re-renders. React limits the number of renders to prevent an infinite loop"错误有多方面的原因： 在一个组件的渲染方法中调用一个设置状态的函数。 立即调用一个事件处理器，而不是传递一个函数。 有一个无限设置与重渲染的useEffect钩子。 这里有个示例来展示错误是如何发生的： import {useSt ...

Jay 是一位经验丰富并且对质量要求很高的开发者，对 Angular、React 等多种框架都很熟悉，我们在开源社区认识，在我做开源社区运营的过程中，Jay 给了我很多帮助，他也是 React DevUI 开源组件库的创建者。 2021年11月，由 Jay 主导发起了 React DevUI 开源组件库项目，经过一年多的孵化🐣，终于在2022年11月23日发布 18.0. ...

react-rnd 是一个React 组件库，可以提供一个可调整大小与可拖拽的组件。 一、安装 使用 npm npm i -S react-rnd 使用 yarn yarn add react-rnd 二、使用方法 基本用法 <Rnd default={{ x: 0, y: 0, width: 320, height: 200, }} > Rnd </Rnd> 使用position和size的例子 <Rnd size={{ width: t ...

壹 ❀ 引 React Developer Tools 是 React 官方推出的开发者插件，可以毫不夸张的说，它在我们日常组件开发中，对于组件属性以及文件定位，props 排查等等场景都扮演者至关重要的角色；毋庸置疑，熟练使用React Developer Tools 能让你的日常开发更加高效。 而我对于目前前端团队同学做了随机调查，询问了大家对于 React D ...

React 全家桶-React基础 用于构建用户界面的JavaScript库。 facebook开源、组件化、声明式编码、React Native移动端开发、虚拟DOM+Diffing算法 官网：https://react.docschina.org/ 第一章：React的基本使用 1.相关js库 react.js：React核心库 React-dom.js：提供操作DOM的react扩展库 Babel.min.js：解析JSX语法代码转为J ...

一、项目背景 企业日常工作中需要制作大量的报表，比如商品的销量、销售额、库存详情、员工打卡信息、保险报销、办公用品采购、差旅报销、项目进度等等，都需要制作统计图表以更直观地查阅。但是报表的制作往往需要耗费大量的时间，即使复用制作好的报表模版，一次次周期性对数据的复制粘贴操作也很耗人，同时模版在此过程 ...

前言 在当前工业4.0和智能制造的产业升级浪潮当中，智慧大屏无疑是展示企业IT成果的最有效方式之一。然而其背后怎么能缺少ECharts的身影呢？对于React应用而言，直接使用ECharts并不是最高效且优雅的方式，而echarts-for-react则是针对React应用对ECharts进行轻量封装和增强的工具库。 echarts-for-react的源码非常精简，本 ...

首先说一下网上其他的编辑器： 轻量级： 1.codeMirror ：文档和代码对不上，没有diff功能 github地址：https://github.com/codemirror/CodeMirror 示例代码：https://uiwjs.github.io/react-codemirror/ 2.react-code-diff 最近一次维护2018年，直接报错无法使用 重量级： 1.monaco ：微软出品，值得信赖 github地址：https ...

React Or Taro 项目配置Eslint校验 一、下载Eslint相关deps依赖项； npm install --save-dev eslint-plugin-prettier eslint-plugin-jsx-a11y eslint-config-airbnb 注意：由于eslint-config-airbnb目前版本已经超过19，会出现一个小问题，箭头函数和命名函数会被Eslint 提示冲突，这是由于19版本的升级导致的解决方案 ...