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

前言 　　首先这是一个react17的项目，包含项目中常用的路由、状态管理、less及全局变量配置、UI等等一系列的功能，开箱即用，是为了以后启动项目方便，特地做的基础框架，在这里分享出来。 　　这里写一下背景，我最开始是node8的环境，因为react17需要至少node14的版本，我就直接升级到16了，关于node升级遇到的问题，我 ...

前言 　　这里写一下如何封装可复用组件。首先技术栈 react hooks + prop-types + jsx封装纯函数组件。类组件和typeScript在这不做讨论，大家别白跑一趟。        接下来会说一下封装可复用组件的思路，比如一个新手应该怎么去封装，都需要注意哪些东西。 　　然后说一些复杂组件需要的功能，比如闭合 ...

React面试题整理 1、react的生命周期 1）、生命周期是什么？ react 实例的生命周期，就是react实例从初始化，更新，到销毁的过程 2）、react实例生命周期经历三个阶段 ​ 初始化阶段：完成从react组件创建到首次渲染的过程 ​ 更新阶段：当调用setState函数时，会引起组件的重新渲染 ​ 销毁阶段：完成组件的销毁 3）、三个 ...

前面两篇关于 React Flow 的文章已经介绍了如何绘制流程图 而实际项目中，流程图上的每一个节点，甚至每一条连线都需要维护一份独立的业务数据 这篇文章将介绍通过 React.context 来管理流程图数据的实际应用     项目结构： . ├── Graph │ └── index.jsx ├── Sider │ └── index.jsx ├── ...

先放一个效果图：该图实现的效果，点击播放按钮，进度条随着时间移动，点击暂停按钮，进度条停止移动   第一步，用到什么库 1.zmxv/react-native-sound 播放声音的库   2.callstack/react-native-slider 进度条的库 第二步，准备播放音频 我测试时，是将mp3格式的声音放在本地的，根据官网描述，本地音 ...

前言 　  Excel功能强大，应用广泛。随着web应用的兴起和完善，用户的要求也越来越高。很多Excel的功能都搬到了sass里面。恨不得给他们做个Excel出来。。。程序员太难了。。。 　　去年我遇到了一个甘特图的需求，做了很多工作，也写了两篇博客。一篇是用 GSTC 这个包做的甘特图，另一篇是自己手写了一个简易的甘 ...

目录1、useState保存组件状态2、useEffect 处理副作用3、useContext 减少组件层级4、useReducer 数据交互5、useCallback 记忆函数6、useMemo 记忆组件7、useRef 保存引用值8、useImperativeHandle 透传 Ref9、useLayoutEffect 同步执行副作用 函数组件，没有 class 组件中的 componentDidMount、componentDidUpdate 等生命 ...

上一篇 《React Flow 实战》介绍了自定义节点等基本操作，接下来就该撸一个真正的流程图了     一、ReactFlowProvider React Flow 提供了两个 Hooks 来处理画布数据： import { useStoreState, useStoreActions } from 'react-flow-renderer'; 通常情况下可以直接使用它们来获取 nodes、edges 但如果页 ...

React react-router-dom 6.0路由使用 由于react路由版本的更新迭代，记录路由知识点 新react-router-dom地址，点击查看详情。 下面为使用的例子 Install npm install react-router-dom@6 history@5 yarn add react-router-dom@6 history@5 配置路由地址 import React from 'react'; import { BrowserRouter a ...

react-redux负责状态管理，使用toolkit插件可以更方便，具体使用方式简单总结一下。 toolkit官网 安装redux 使用toolkit的需要配置react-redux一起使用。 npm install react-redux@latest npm install @reduxjs/toolkit 使用toolkit的步骤 配置一个reduxStore import { configureStore } from '@reduxjs/toolkit'; expor ...

先上示例： 1.子组件 import React, {useEffect, useImperativeHandle, forwardRef} from 'react'; function AllProjectTable(props, ref) { useImperativeHandle(ref, () => ({ handleGetProjectList, handleStopProject })); // 获取项目列表 const handleGetProjectList = () => { }; // 停止 ...

基础功能无非是增删改查，用于熟悉路由，组件，传值等Antd Pro的常用功能 上文介绍了Antd Pro的基础搭建，再此基础上进行实践 Antd Pro默认版本V5   一.菜单 首先配置左侧菜单列表，文件夹config》config.ts中找到routes: 添加如下内容： { path:'/myapp', name:'我的应用', icon:'AppstoreFilled ...

介绍 本文基于React+antd，给大家演示一个完整的全屏demo。 起因是开发今天给我提了一个sql编辑器输入框比较小，不支持放大，不太方便。希望能够全屏显示，联想到自己以后可能也会需要，便研究并记录之。 其实我觉得也没有很小（orz） 全屏 大家应该都在web页面里面见过全屏按钮，点击它以后页面就成了全屏，经常会在代码 ...

有段时间没更新博客了，之前计划由浅到深、从应用到原理，更新一些RN的相关博客。之前陆续的更新了6篇RN应用的相关博客（传送门），后边因时间问题没有继续更新。主要是平时空余时间都用来帮着带娃了，不过还是要挤挤时间来总结下，目标是完成由浅到深、由应用到原理的RN系列博客。本篇算是属于原理部分的博客，不过不在 ...

React前端环境搭建 　　React简介(来源知乎)：   1.1.1 React 是什么 React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES来自：React 官方网站 狭义来讲 React 是 Facebook 内部开源出来的一个前端 UI 开发框架，广义来讲 React 不仅仅是 js 框架本身，更是一套完整的前端开发生态体系，这套体系包括 ...

前言 最近做的项目使用了微前端框架single-spa。 对于这类微前端框架而言，通常有个utility应用，也就是公共应用，里面是各个子应用之间可以共用的一些公共组件或者方法。 对于一个团队而言，项目中公共组件和方法的使用难点不在于封装不在于技术，很多时候在于团队内部成员是否都能了解这些组件，以避免重复开发，从而提升 ...

需求 - 要在react项目中实现颜色获取器功能 解决方案 - 使用react-color 依赖 - git地址：https://github.com/casesandberg/react-color - 文档地址：http://casesandberg.github.io/react-color/#api-onChange 使用 1. 安装react color 依赖 yarn add react-color @types/react-color 项目中没有使用typescript时，不需 ...

本文主要对在React应用中可以采用的一些性能优化方式做一下总结整理 前言 目的 目前在工作中，大量的项目都是使用react来进行开展的，了解掌握下react的性能优化对项目的体验和可维护性都有很大的好处，下面介绍下在react中可以运用的一些性能优化方式； 性能优化思路 对于类式组件和函数式组件来看，都可以从以下几个 ...

    一、是什么 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 至于为什么引入hook，官方给出的动机是解决长时间使用和维护react过程中常遇到的问题，例如： 难以重用和共享组件中的与状态相关的逻辑 逻辑复杂的组件 ...

前言 自从 React 推出 hooks 的 API 后，相信大家对新 API 都很喜欢，但是它对你如何使用它会有一些奇怪的限制。比如，React 官网介绍了 Hooks 的这样一个限制： 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中 ...