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

其他章节请看： 七天接手react项目 系列 react 起步 背景 假如七天后必须接手一个 react 项目（spug - 一个开源运维平台），而笔者只会 vue，之前没有接触过 react，此刻能做的就是立刻展开一个“7天 react 扫盲活动”。 react 活动扫盲方针 以读懂 spug 项目为目标 无需对每个知识点深究 功能优先能实现，代码质量无需 ...

　　npx create-react-app react-intl-demo && cd react-intl-demo,创建react-intl-demo项目。npm install react-intl, 安装react-intl。使用react-intl时, 首先要提供一个provider，把整个项目包起来。怎么提供呢？使用react-intl的IntlProvider，它有1个必传参数locale, 设 ...

　　useRef 　　useRef()返回一个具有current属性的对象，称为ref对象。把对象赋值给原生的React Element元素的ref属性，就能获取到对应的真实的DOM元素。 import React, { useRef } from "react"; const CustomTextInput = () => { const textInput = useRef(); // 创建ref对象 const focusTextInput = () => textIn ...

react-window 这篇是 react-window 的源码阅读, 因为此库使用的是 flow, 所以会涉及一些特殊的东西, 和 ts 类似 使用 List 首先是 List 的使用: import {FixedSizeList as List} from 'react-window'; const Row = ({index, style}) => ( <div style={style}>Row {index}</div> ); const App = () => ( <List ...

一个路由就是一个通道，页面之间的跳转其实就是路由的切换，所以每个应用的路由配置是必须的，浅谈react中怎么配置路由 首先你要在src文件夹下新建一个router的文件下，在router文件下新建一个index.js(我用的是TS,所以是index.tsx) 然后在index.jsx里这样去配置 1 import React, { ReactNode, lazy } from "react"; 2 ...

表单状态管理曾经一直是让前端头疼的问题，错误提示，校验规则，动态表单，重置。。。搞得人头大。好在近几年也出现了不少好的社区方案，比如 Formik, react-hook-form, react-final-form等等，今天我们来谈谈其中的 react-hook-form。 useForm useForm 是最基础的表单状态管理钩子，它接受以下参数： const { handleSub ...

React中fetch---基本使用 一、fetch fetch是一种XMLHttpRequest的一种替代方案，在工作当中除了用ajax获取后台数据外我们还可以使用fetch、axios来替代ajax 二、fetch的基本使用 fetch(url).then(res => {             return res.json() //res不是需要 ...

要实现React的路由跳转，需要用react-router-dom组件。 "react-router-dom": "^6.2.1" 在App.js配置路由 import React, { Component } from 'react'; import './App.scss'; // 引入样式文件 import { HashRouter, Route, Routes, Navigate } from "react-router-dom"; import Home from './view/Home.jsx'; import Conf ...

前言 　　看过几个react hooks 的项目，控制台上几百条警告，大多是语法不规范，react hooks 使用有风险，也有项目直接没开eslint。当然，这些项目肯定跑起来了，因为react自身或者其他的包，在编译的时候弥补了一些缺陷，还有一些是不规范的警告，或者还没运行到报错的代码。 　　在这，我想分享并解析一些react开发过程中 ...

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

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 ...