REACT
react扩展
## 1. setState ### setState更新状态的2种写法 ``` (1).setstate(statechange, [callback])--对象式的setState 1.statechange为状态改变对象（该对象可以体现出状态的更改） 2.callback是可选的回调函数，它在 ......
如何使用三个有用的工具提升你的React技能
自 2013 年发布以来，React.js 一直是使用最广泛的 JavaScript 工具之一，这要归功于其无与伦比的多功能性和效率。 在其基于组件的架构和虚拟 DOM 实现的支持下，React.js 在构建现代动态 Web 应用程序方面表现出色。它使开发人员能够创建可重用的 UI 元素，从而提高生 ......
React Native In Action中的demo的运行
我用了最新的xcode和新的react native。 Chapter6: Navigation 这一章中的事例跑不起来，应该是程序用了就的版本的react navigation （"react-navigation": "^2.0.1"），同时关于Navigation的用法也做了不小的改动，因此需 ......
Create React App 被 React 官方抛弃
2023年3月17号 react官方文档正式更新  不知道小伙伴有没有留意到了没：创建项目的工具 由`create-re ......
React
1.类组件 类组件的状态数据定义在它的私有属性 state上 读取也是直接从state上读取 class ClassState extends Component{ constructor(){ //1. 调用父类的构造器 super(); //2. 定义状态数据 this.state = { co ......
【React】: React的生命周期
概述 生命周期的每个阶段总是伴随着一些方法的调用，这些方法就是生命周期的钩子函数 钩子函数的作用：为开发人员在不同操作阶段提供了十几 只有 类组件 才有生命周期 生命周期的图片： 同时有： 编写以下代码，从而沿着constructor,render,componentDidMount的顺序： cla ......
Windows下React的安装与使用
1. npm安装 下载node.js: nodejs.org/en/download… 命令行下输入: npm -v 验证是否安装成功。 2. cnpm安装 安装命令： npm install -g cnpm --registry=https://registry.npm.taobao.org 命令 ......
react echats封装
import * as echarts from "echarts"; import {EChartsOption} from 'echarts' function Index(props:EChartsOption) { const echartsRef:any= useRef<HTMLEleme ......
react antd 表头分组渲染的问题记录
``` import React, { useEffect } from 'react' import { observer } from 'mobx-react' import { get } from 'lodash' import { Modal } from 'antd' import Se ......
react项目入口文件即调用顺序
react项目入口文件，指的是启用react项目的主文件，它通常是一个JavaScript文件，包含了项目组件，并将这些组件渲染到界面上。该文件通常命名为 index.js 或 app.js，并被放在应用程序的根目录中。 使用cra创建的react项目入口文件是src目录下的index.js。这是一 ......
React技术栈
# **React技术栈分享** React、Redux 和 React Router 是当前前端开发中非常常用的技术栈组件，而他们之间的结合则可以带来更加强大和灵活的开发能力。本文将为大家分享使用 React、Redux 和 React Router 的经验。 首先，我们需要知道这三个技术组件的作 ......
taro中使用taro-react-echarts 好用~优秀~
## 前提 **taro版本 3.6.2** **[taro-react-echarts](https://www.npmjs.com/package/taro-react-echarts)版本 1.2.2** 项目中需要使用echarts * 最先尝试了 ec-canvas ,有小问题： 偶现打开 ......
taro使用taro3-echarts-react报错，图表不出来
## 问题 **taro版本 3.6.2** **[taro3-echarts-react](https://www.npmjs.com/package/taro3-echarts-react)版本 1.0.4** 在taro小程序开发中，使用taro3-echarts-react时，echarts ......
深入解析React DnD拖拽原理，轻松掌握拖放技巧！
>我们是[袋鼠云数栈 UED 团队](http://ued.dtstack.cn/)，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。。 >本文作者：霁明 # 一、背景 ## 1、业务背景 业务中会有一些需要实现拖拽的场景，尤其是偏视觉方向以及移动端 ......
前端JavaScript开发手册——React、Angular和Vue比较
前端框架在 Web 开发中不可或缺。它们提供结构化方法和预定义组件来简化编码过程。 这些工具还可以通过提供可重用组件和抽象复杂任务（如 DOM 操作和状态管理）来帮助提高生产力。这使开发人员可以专注于应用程序逻辑，而不是编写重复的代码。 框架通过模块化开发提高代码的可维护性，使修改或替换单个组件变得 ......
我今天分分钟就理解了react中的reducer
## 什么是 reducer 函数? 为什么要用 reducer? - Reducer 是处理状态的另一种方式。通俗来讲，就是可以让你的复杂组件更加干净，代码更加优雅 - 当你的组件里有好多个状态更新逻辑，并且有些是有一定关联性的，写多个useState会看起来很杂乱，为解决这个问题，我们可以将多个 ......
创建react项目
react官网 https://reactjs.bootcss.com/ 创建react项目 npx create-react-app my-app cd my-appnpm start 创建组件，jsx 如果你书写的标签代码与 return 语句不在同一行上，则必须将其用一对圆括号括起来 expo ......
React使用知识点汇总
文章来源：https://mp.weixin.qq.com/s/FSnCz8EhShJMdG_FGf0igQ 1、不用所有的都使用state import { useRef, useState } from "react"; export default function NoState() { c ......
react+antd面包屑导航
根据以前写vue面包屑写的。 import { useLocation, matchRoutes, } from "react-router-dom"; const location = useLocation(); import router from './router' useEffect(( ......
如何在2023年开启React项目
在这里，我想给你一个新的React项目入门的简要概述。我想反思一下优点和缺点，反思一下作为一个开发者所需要的技术水平，反思一下作为一个React开发者，每个启动项目都能为你提供哪些功能。最后，你将了解到针对不同需求的3种解决方案。 **免责声明**：从个人开发者的角度来看，我完全支持React团队在 ......
如何在运行并调试React Native App
1. 进入工程目录，启动：Metro npx react-native start 2. 然后在新的terminal窗口中运行app npx react-native run-ios 第1，2步参考：https://reactnative.dev/docs/environment-setup#run ......
如何设计React应用程序的样式——比较不同的选项
样式在创建具有视觉吸引力和用户友好的 Web 应用程序方面起着至关重要的作用。对于 React 应用程序，可以通过多种方式来设置组件和 UI 元素的样式。 在本文中，我们将探讨几个流行的选项，包括纯 CSS、CSS 模块、CSS 预处理器、Tailwind CSS、CSS-in-JS 库（如 Sty ......
vite + react + arco-design-mobile 使用 babel-plugin-import 实现按需加载
### 0.什么是vite？ vite是一种新型前端构建工具。 - 一个开发服务器，它基于原生ES模块提供丰富的内建功能 - 一套构建指令，它使用Rollup 打包你的代码，可输出用于生产环境的高度优化过的静态资源 ### 1.什么是babel？ babel 是一个javasctipt 编译器，他是 ......