React
react hooks定时器，值增1
使用函数式更新的方法实现定时器的代码： import React, { useState, useEffect } from 'react'; function App() { const [count, setCount] = useState(0); useEffect(() => { cons ......
React学习之diff算法
1. 前言 找到了一篇特别好的笔记——diff 2. 验证diff <!DOCTYPE html> <html lang="en"> <head> <style> .box { width: 300px; height: 150px; overflow: auto; background-color ......
react native使用zustand进行状态管理
1. 安装： # NPM npm install zustand # Yarn yarn add zustand 2. 创建store： import { create } from "zustand"; const useStore = create((set) => ({ count: 0, s ......
React， chartGpt写的换肤方法
const themes = { default: { backgroundColor: 'white', textColor: 'black', fontSize: '16px', }, dark: { backgroundColor: 'black', textColor: 'white', f ......
【React系列】React.memo() vs useMemo()
React.memo()与useMemo()之间有什么主要区别？ 性能优化是一只web开发中的一个重要讨论点。对于react团队同样如此，为了实现加速组件的渲染速度，采用“备忘录”的方式。 所以这个时候就React.memo()和 useMemo 钩子 就为了解决这个问题产生了。 本文将比较和对比R ......
【React】React.memo与useMemo的区别和联系
概述 React.memo和useMemo都是React进行性能优化的手段，它们允许我们缓存需要进行高性能计算的结果，以便下次渲染页面时，返回缓存的值而不必重新计算函数，从而确保我们的应用程序运行的更快，避免不必要的开销。 React.memo 详解 为什么memo(memoization的简写)在 ......
React Hooks之useRef详解
React Hooks之useRef详解 最新推荐文章于 2023-08-26 21:32:11 发布 RayShyy 于 2023-02-18 10:23:20 发布 2717 收藏 5 分类专栏： React 文章标签： react.js Hook Hooks useRef ref 版权声明：本 ......
前端进阶系列——理解 React Ref
前端进阶系列——理解 React Ref 秦书羽 杭州@朝夕光年 关注他 17 人赞同了该文章 Ref 是 Reference(引用) 的缩写。 一、前言 在 React 中通常遵循 “自上而下” 的 “单向数据流”。父组件和子组件的通讯只能通过 Props。如果要修改一个子组件，我们要修改 Pr ......
React跨路由组件动画
我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：佳岚 回顾传统React动画 对于普通的 React 动画，我们大多使用官方推荐的 react-transition-group，其提供了四个基本组件 Tra ......
react 常用的hooks
react 常用的hooks 有哪些？ useState：用于在函数组件中添加和管理状态。 import React, { useState } from 'react'; const Counter = () => { const [count, setCount] = useState(0) ......
如何编写难以维护的 React 代码？耦合通用组件与业务逻辑
在众多项目中，React代码的维护经常变得棘手。其中一个常见问题是：将业务逻辑直接嵌入通用组件中，导致通用组件与业务逻辑紧密耦合，使其失去“通用性”。这种做法使通用组件过于依赖具体业务逻辑，导致代码难以维护和扩展。 示例：屎山是如何逐步堆积的 让我们看一个例子：我们在业务组件 PageA 和 Pag ......
react 页面如何自动监控版本更新
一般我们打包的js bundle，都自带了hash，所以，刷新页面就会加载最新的内容。 但如果用户一直不去刷新页面，停留在当前页面呢？ 可以前端写个轮询，去检测，2. 后端推送 对于第一种方案实现简单，但会有一点性能损耗，第二种需要后端实现，SSE,或websocket? 下面代码展示第一种轮询方案 ......
React:组件的复用
1. render -props 参考代码： import React from 'react'; import ReactDOM from 'react-dom/client'; import PropTypes from 'prop-types' class App extends React. ......
react18函数组件使用指南-使用代码集合以及报错记录汇总（不断更新中）
@目录1. react报错-Warning: Instance created by useForm is not connected to any Form element. Forget to pass form prop?问题分析解决方案如果是除了modal嵌套类型出现此种报错，我们可以设置如 ......
React 大师版
第一部分 一、todoList案例相关知识点 1.拆分组件、实现静态组件，注意：className、style的写法 2.动态初始化列表，如何确定将数据放在哪个组件的state中？ ——某个组件使用：放在其自身的state中 ——某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提 ......
The Road to learn React
React基础 组件内部状态 组件内部状态也称之为局部状态，允许保存、修改和删除存储在组件内部的属性 使用ES6类组件可以在构造函数种初始化组件的状态，构造函数只会在组件初始化的时候调用一次 const list = [ { title: 'React', url: 'https://faceboo ......
在非React组件的文件中使用Reudx 会造成的问题及解决方案
Redux的使用场景 函数式组件内（hooks调用redux） 其他文件（无法使用hooks调用redux） 这里函数式组件内使用Redux不再赘述，站内跳转，Redux toolkit使用 一、非函数式组件的文件内使用redux useDispatch 和 useSelector 这两个hooks ......
VS Code开发React-Native及Flutter 开启无线局域网安卓真机调试问题
VS Code开发React-Native及Flutter 开启无线局域网安卓真机调试问题 发布于 2020-10-20 15:48:47 1.7K0 举报 笔者前段时间在做react-native开发，一直是有线连接安卓真机进行调试的。有线调试确实带来诸多麻烦，因为在调试过程中需要频繁和手机进行交 ......
React in patterns
In brief > Foundation 1. Communication - Input - Output 2. Event handlers 3. Composition - Using React's children API - Passing a child as a prop - Hi ......
React 路由
React 路由 1.ReactRouter 5.x 功能概述：点击切换展示区内容，并切换浏览器地址 /about /home About 组件 import React, { Component } from 'react' export default class About extends C ......
webpack - 构建支持TypeScript的React应用
1. 初始化package.json 创建项目文件夹 mkdir webpack-react-ts cd webpack-react-ts 初始化项目package.json yarn init -y { "name": "webpack-react-ts", "version": "1.0.0", ......
eslint爱彼迎规范 React18+typescript
eslint终极规范 爱彼迎 eslint-config-airbnb 什么是eslint，为什么要使用eslint eslint 的配置项过多，针对js针对ts针对vue针对jsx、tsx等等不同的规则，小公司或者个人项目可以使用成熟的eslint社区规范，如airbnb、standard、goo ......
react17源码中部分二进制计算的解释
theme: qklhk-chocolate highlight: a11y-dark react17放弃了之前的expirationTime而启用了lane模型，故而在原来16的基础上又产生了更多的二进制运算，在接下来的一段时间我打算把这些二进制运算都整明白了、 关于react为什么会启用lane ......
超级实用！React-Router v6实现页面级按钮权限
大家好，我是王天～ 今天咱们用 reac+reactRouter来实现页面级的按钮权限功能。这篇文章分三部分，实现思路、代码实现、踩坑记录。 嫌啰嗦的朋友，直接拖到第二章节看代码哦。 前言 通常情况下，咱们为用户添加权限时，除了页面权限，还会细化到按钮级别，比如、新增、删除、查看等权限。 如下效果， ......
防止react-re-render: Why Suspense and how ?
近期内部项目基础项目依赖升级，之前使用的路由缓存不再适用，需要一个适配方案。而在此过程中react re-render算是困扰了笔者很久。后来通过多方资料查找使用了freeze解决了此问题。本文主要论述react re-render问题一般的解决方案和freeze在react内部的实现原理。reac ......
React 18 useEffect 代码执行两次的问题
https://github.com/zjy4fun/notes/issues/62 React 18 提出的新特性“并发渲染”，为了防止组件重复挂载的问题，React 在开发模式 && 严格模式下，useEffect 会执行两次（模拟组件挂载和组件卸载，让问题提早暴露），但是线上模式不会。 开发模 ......
React Native 动画（Animated）
实现效果 代码 从react-native中引入 import { Animated, Easing, } from 'react-native'; js实现 const opacity1 = useRef(new Animated.Value(0.2)).current; const opacit ......
基于react18+vite4+arco.design搭建极简版后台管理模板
趁着国庆前夕整了一个vite4结合react18搭建后台管理模板，搭配上字节团队react组件库ArcoDesign，整体操作功能非常丝滑。目前功能支持多种模板布局、暗黑/亮色模式、国际化、权限验证、多级路由菜单、tabview标签栏快捷菜单、全屏控制等功能。极简非凡的布局界面、高定制化模块，用心打 ......
React-Native之Gradle下载慢的解决方案
一、解决gradle下载慢的问题 1.使用国内镜像 maven脚本如下: buildscript { repositories { maven { url 'https://maven.aliyun.com/repository/gradle-plugin' } maven { url 'https ......