随笔分类 -  react

react实现页面登录的几种方式检查
摘要：方法整理 方案适用版本实现关键点优缺点 React Router v6 ✅ React Router v6 <Route element={<PrivateRoute />}> + <Outlet /> ✅ 优点： 代码简洁，受保护路由统一管理。 ❌ 缺点： 仅适用于 React Router v6 阅读全文
posted @ 2025-03-14 14:42 我是格鲁特 阅读(45) 评论(0) 推荐(0)
React 的 Context API
摘要：React 的 Context API 是 React 提供的一种用于在组件树中共享数据的机制，可以让我们不需要通过 props 一层层地传递数据，避免了在深层嵌套的组件中逐级传递相同的数据 Context API 的核心概念 Context： Context 是 React 提供的对象，它可以在整 阅读全文
posted @ 2025-03-09 22:17 我是格鲁特 阅读(90) 评论(0) 推荐(0)
useReducer介绍
摘要：useReducer 是 React 中用于处理复杂状态逻辑的 Hook。它可以帮助你将一个复杂的状态对象分解成更细粒度的子状态，并通过定义动作（actions）来管理这些状态的变化。 具体来说，useReducer 适用于需要多个子状态或者依赖多个操作的场景。它的核心是通过一个 reducer 函 阅读全文
posted @ 2025-03-09 22:04 我是格鲁特 阅读(61) 评论(0) 推荐(0)
react虚拟dom是什么？是如何提升性能的
摘要：虚拟dom是react的核心概念，它使用js对象来反应真实dom的结构。 当组件的状态变更后，react会计算出新的虚拟dom树，并跟前一次的虚拟dom树进行对比，找出差异（也就是需要更新的部分），最后仅将这些差异应用到真实 DOM 中。通过这种方式，React 避免了对真实 DOM 的频繁操作，从 阅读全文
posted @ 2025-03-09 21:53 我是格鲁特 阅读(86) 评论(0) 推荐(0)
react父组件调用子组件内部的dom或方法
摘要：在 React 中，通过 React.forwardRef 和 useImperativeHandle 可以实现将父组件的 ref 转发给子组件，从而引用子组件的 DOM 或方法。以下是实现的步骤和代码示例： import React, { forwardRef, useImperativeHand 阅读全文
posted @ 2024-11-27 13:14 我是格鲁特 阅读(120) 评论(0) 推荐(0)
受控或非受控组件
摘要：对比表格如下: 组件类型受控组件 (Controlled)非受控组件 (Uncontrolled) 定义 表单元素的值由 React state 管理 表单元素的值由 DOM 管理 状态管理 React 管理表单元素的状态（通过 state） 通过 `ref` 获取 DOM 元素的当前值 更新值 每 阅读全文
posted @ 2022-04-22 10:36 我是格鲁特 阅读(35) 评论(0) 推荐(0)
react面试核心知识总结
摘要：类组件和函数组件的比较 一、React Hook Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 1.要解决什么问题? 可以在函数组件中使用状态、模拟组件的生命周期 可以复用组件状态及相关的变更逻辑。 2. 使 阅读全文
posted @ 2022-03-30 09:54 我是格鲁特 阅读(136) 评论(0) 推荐(0)
react单元测试
摘要：Enzyme 阅读全文
posted @ 2020-10-19 19:28 我是格鲁特 阅读(122) 评论(0) 推荐(0)
react组件开发
摘要：1.组件创建脚手架 create-react-library是一个用来创建react组件库的cli,中文文档 隐式配置 如何关闭css modules? 创建好工程后，修改根目录下的package.json中scripts节点下的start和build命令 "build": "microbundle 阅读全文
posted @ 2020-10-13 11:36 我是格鲁特 阅读(292) 评论(0) 推荐(0)
你可能不需要使用派生 state
摘要：https://zh-hans.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html 阅读全文
posted @ 2020-09-29 11:02 我是格鲁特 阅读(75) 评论(0) 推荐(0)
redux核心知识
摘要：什么时候该使用react-redux 使用说明 官方网站 一、基本使用 首先，设置 Redux store 和 action。 // actions.js export const increment = () => ({ type: 'INCREMENT' }); // reducer.js co 阅读全文
posted @ 2019-12-11 10:42 我是格鲁特 阅读(217) 评论(0) 推荐(0)
react-router的使用备注
摘要：一、react-router 实现原理 1.包安装问题 react-router是核心库，在项目中不需要安装，web开发只需安装react-router-dom、native开发安装react-router-native。 2.参数携带与获取 传递方式描述获取方式示例 路径参数 通过 URL 的路径 阅读全文
posted @ 2019-11-21 22:32 我是格鲁特 阅读(199) 评论(0) 推荐(0)
如何将一个react组件进行静态化调用
摘要：ant-design的message组件可以使用message.xxx的方法调用，调用代码如下： import { message, Button } from 'antd'; const info = () => { message.info('This is a normal message') 阅读全文
posted @ 2019-10-22 09:25 我是格鲁特 阅读(1836) 评论(0) 推荐(1)
react element和react node的区别
摘要：ReactElement 定义：ReactElement是通过React.createElement或JSX语法创建的元素对象，是React的基础构件。它是一个不可变的对象，用于描述UI中实际的DOM元素或组件。 类型：通常一个ReactElement代表的是一个具体的元素（例如，<div>, <B 阅读全文
posted @ 2019-10-16 22:34 我是格鲁特 阅读(1562) 评论(1) 推荐(0)
react新旧生命周期
摘要：React16.3.0之前生命周期 16.3开始建议使用新的生命周期 新的生命周期增加了static getDerivedStateFromProps()以及getSnapshotBeforeUpdate()，废弃了原有的componentWillMount()、componentWillUpdat 阅读全文
posted @ 2019-10-16 22:09 我是格鲁特 阅读(480) 评论(0) 推荐(0)
react children技巧总结
摘要：在使用该技巧时，建议先看一下相关的知识，点我查看 假如使用该属性时，想把父组件的所有属性及部分方法传递给子组件，该怎么办呢？看代码 阅读全文
posted @ 2018-11-17 11:27 我是格鲁特 阅读(233) 评论(0) 推荐(0)