> 效果预览  > 关键代码 ```javascript //调节窗口大小 useEffect(() => { if (conref.current) ...

# React笔记-Hooks(九) ## Hooks ### 概念 >React Hooks 的意思是 组件尽量写成纯函数 如果需要外部功能和副作用 就用钩子把外部代码"钩"进来 ### 函数组件和类组件区别 >- 函数组件没有状态(state) 类组件有 >- 函数组件没有生命周期 类组件有(挂 ...

参考：[Building a WebGL Carousel with React Three Fiber and GSAP](https://tympanus.net/codrops/2023/04/27/building-a-webgl-carousel-with-react-three-fibe ...

大家好，我是DOM哥。 图谱年年有，今年我来盘！ 之前已经盘完了 Vue 的技术图谱，今天来盘 React 的。不管你是资深 React 用户，还是刚入门想学习 React 的小白，相信都能帮助到你 ...

业务需求：上传头像，上传完毕后拿到头像的url，把头像展示在页面中，最终把头像url和其他用户信息一起发送给服务器 上传头像流程 导入 Upload 组件和图标(一个加号，一个加载中) import { Upload } from 'antd'; import { PlusOutlined, Loa ...

[1] ERROR in ./src/node_modules/react-bootstrap/esm/AbstractModalHeader.js 3:0-63[1] Module not found: Error: Package path ./useEventCallback is not e ...

React在写一个购物车的redux toolkit时遇到了问题。核心问题是reducer中不能既修改state，又return新值。修改后代码正常运行。 ...

最开始想实现一个功能，点击img图标后给出购物下拉框CartDropdown，当img及CartDropdown失去焦点时隐藏CartDropdown。 最开始的核心代码如下： export default function Cart() { const [isCartOpen, setIsCart ...

今天解决了我自认为一个很不起眼的Bug。 我的Tabs下面有5个tabPane，并且这几个tabPane共用了一个search组件，今天遇到了一个bug，就是这几个组件使用公共查找组件的时候，前一个组件的值会影响下一个组件的值。 找了半天发现，原来我应该在父组件Tabs中定义一个useState的状 ...

前端工程化实战是指通过组织工作流程、使用工具和技术来提高前端开发效率和质量的一种方法。常见的前端工程化实践包括模块化开发、自动化构建、代码检查和测试、性能优化等。下面将简要介绍模块化开发、性能优化和组件化实践。 ...

其他章节请看： 低代码 系列 中后台集成低代码预研 背景 笔者目前维护一个 react 中后台系统（以 spug 为例），每次来了新的需求都需要前端人员重新开发。 前面我们已经对低代码有了一定的认识，如果能通过一个可视化的配置页面就能完成前端开发，将极大的提高前端（或后端）的效率。甚至能加快企业内部 ...

如何为组件添加 CSS 的 class？ 传递一个字符串作为 className 属性： render() { return <span className="menu navigation-menu">Menu</span> } CSS 的 class 依赖组件的 props 或 state 的情 ...

react三大属性 一.状态 类组件1. state 是组件的属性，值是对象。state中的数据是可读可写的,通过更新state来更新对应的页面显示(重新渲染组件)，通过setState来更新state数据且更新是一种合并 ，在类组件中使用.组件自定义的方法中this为undefined(1)强制绑 ...

配置开发环境 脚手架工具create-react-app 储备知识：终端或命令行、代码编辑器 React官方中文文档 create-react-app 其是基于Node的快速搭建React项目的脚手架工具。 npx create-react-app testdemo cd testdemo npm ...

JSS 是什么 简单来说，一句话概括CSS in JS (JSS)，就是"行内样式"（inline style）和"行内脚本"（inline script）。 因为，自从React出现以后，基于组件化的要求，强制把HTML、CSS、JavaScript捆绑在一起，在同一个文件里面，封装了结构、样式、 ...

终端主要的目的是可以让我们在文件系统中进行四处浏览和打开/运行某些东西，只是在 windows 上我们之前都是用 GUI 界面进行操作的，现在是在终端中使用 shell 命令进行操作而已。 ...

React旧版的生命周期 初始化阶段：由ReactDOM.render()触发 初次渲染 1.constructor() 2.componentWillMount() 3.render() 4.componentDidMount() 一般在这个里面做一些初始化的事情，如定时器，发送网络请求，订阅消息 ...

虚拟dom中key的作用 当状态中的数据发生改变时，react会根据新数据生成新的虚拟dom，随后react进行新虚拟dom与旧虚拟dom的diff算法比较，比较规则如下： 1.旧虚拟dom找到了与新虚拟dom相同的key a.若虚拟dom中的内容没变，则使用之前的真实dom b.若虚拟dom中的内 ...

新项目用 umi4-max 搭建，部分功能想要使用其他项目的功能，不想重新开发，想到了使用 webpack5 的联邦模块，可以直接引用其他项目代码来实现共享代码。 理想很美好，现实很残酷。直接按照 webpack5 联邦模块的使用方法，并不能成功，而官方文档没有明确说明如何使用。 webpack 联 ...

1. 效果展示 在线查看 2. 开始前说明 效果实现参考源码：Logo 聚集与散开 原效果代码基于 react jsx 类组件实现。依赖旧，代码冗余。 我将基于此进行重构，重构目标： 基于最新依赖包，用 ts + hook 实现效果 简化 dom 结构及样式 支持响应式 重构应该在还原的基础上，用更 ...