随笔分类 - react相关
react相关
摘要：export default function Button() { function handleClick() { alert('你点击了我！'); } return ( <button onClick={handleClick}> 点我 </button> ); } 按照惯例，通常将事件处理程
阅读全文
摘要：`useQuery` 是 `react-query` 库中的一个核心钩子（Hook），它用于从异步数据源（如 API 服务器）获取数据，并在 React 组件中管理这些数据的状态。`useQuery` 不仅提供了数据获取的功能，还内置了数据缓存、状态更新、错误处理和数据刷新等功能。这使得开发者能够更
阅读全文
摘要：JavaScript中的变量提升（hoisting）是指在代码执行之前，变量和函数的声明会被提升到作用域的顶部。这意味着你可以在声明之前使用变量和函数，而不会引发错误。 变量提升的规则如下： 变量声明（使用var关键字）会被提升到其所在作用域的顶部，并初始化为undefined。 函数声明会被提升到
阅读全文
摘要：如果你在 React 函数组件中定义一个函数，并且这个函数使用了 React 的 Hook（如 useState、useEffect 等），那么这个函数就是一个 Hook 函数。 普通函数可以在任何地方定义和使用，而 Hook 函数只能在 React 函数组件中使用。 使用 Hook 的函数必须以
阅读全文
摘要：报错：The 'getMergeMap' function makes the dependencies of useCallback Hook (at line 192) change on every render. Move it inside the useCallback callback
阅读全文
摘要：按钮点击无效 pointer-events: none; 是一种 CSS 样式规则，用于指定元素在用户与之交互时的行为。当应用了 pointer-events: none; 样式时，元素将不再响应鼠标事件（如点击、悬停等），即使用户点击该元素上的内容，也不会触发任何与该元素相关的事件。 主要作用：
阅读全文
摘要：在 React 中，useMemo 应该用于缓存计算结果，而不是执行副作用操作。当你在 useMemo 内部更新 state 时，可能会导致循环依赖或不稳定的渲染行为。 当你在 useMemo 内部更新 state 时，这意味着每次组件重新渲染时，useMemo 返回的值都会发生变化，从而触发重新渲
阅读全文
摘要：export function userPrizeListDownload( params: Partial<UserPrizeList>, ) { return requestLotteryApi(`/xxx/download`, { params, responseType: 'arrayBuf
阅读全文
摘要：`useRef` 是 React 提供的一个 Hook，它可以用于在函数组件中存储可变值，并且在组件重新渲染时保持不变。`useRef` 的使用场景包括但不限于： 1. 访问 DOM 元素：可以使用 `useRef` 来获取并操作 DOM 元素，比如设置焦点、测量元素尺寸等。 2. 存储任意可变值：
阅读全文
摘要：useCallback 是 React 中的一个 Hook，用于优化性能并避免不必要的函数重新创建。 在 React 中，当一个组件重新渲染时，其内部的函数也会被重新创建。这可能会导致向子组件传递的回调函数发生变化，从而导致子组件不必要地重新渲染。为了避免这种情况，可以使用 useCallback
阅读全文
摘要：`useMemo` 是 React 提供的一个自定义 Hook，用于在渲染过程中执行一些昂贵的计算，并且仅在依赖项发生变化时重新计算。这有助于优化性能，避免在每次渲染时都重新计算相同的数值或对象。 在使用 `useMemo` 时，您可以传入一个函数和一个依赖项数组。`useMemo` 会在渲染过程中
阅读全文
摘要：import React, { createContext, useContext } from 'react'; // 创建一个上下文 const ThemeContext = createContext('light'); // 在某个父组件中提供上下文的值 function App() { r
阅读全文
摘要：useCallback 是 React 中的一个钩子函数，它用于创建一个稳定的回调函数，并且可以帮助优化性能。通常情况下，当父组件向子组件传递回调函数时，如果没有使用 useCallback，每次父组件重新渲染时，都会创建一个新的回调函数实例，这可能导致子组件不必要的重新渲染。使用 useCallb
阅读全文
摘要：当你在 React 中使用 `{children}` 时，它通常是用来传递一个函数作为子组件。这种模式通常被称为 "render props" 或 "function as child"。通过这种方式，父组件可以向子组件传递一个函数，并在子组件内部调用这个函数，并且还可以传递参数给这个函数。 下面是
阅读全文
摘要：useReducer 是 React 中的一个 Hook，用于管理组件的状态。它提供了一种更复杂的状态管理机制，适用于那些状态逻辑较为复杂、包含多个子值的情况。 与 useState 不同，useReducer 基于一个叫做 reducer 的函数来更新状态。Reducer 接收当前的状态和一个表示
阅读全文
摘要：React 中的 Hook 是 React 16.8 版本引入的一项特性，它让你在函数组件中使用状态(state)、生命周期方法、副作用等 React 的特性，而无需编写类组件。 使用 Hook 的主要目的是让函数组件具备了更多类组件的功能，同时让代码更加清晰、简洁，并且更容易复用逻辑。 一些常见的
阅读全文
摘要：JSX 是 JavaScript XML 的缩写，它是一种 JavaScript 的语法扩展。JSX 允许在 JavaScript 代码中编写类似于 XML 或 HTML 的标记结构，用来描述用户界面的结构。 在 React 应用中，开发者通常使用 JSX 来定义组件的结构。这样做的好处是，JSX
阅读全文
摘要：在 React 中，使用函数组件还是类组件取决于你的需求和个人偏好。在过去，类组件是主要的 React 组件形式，但是随着 React Hooks 的引入，函数组件也变得非常强大，两者之间的差异已经减小。以下是一些指导原则： 简单的 UI 组件：对于简单的 UI 组件，如按钮、图标、展示静态内容的组
阅读全文
摘要：在 React 中，组件可以分为受控组件和非受控组件，它们之间的主要区别在于组件内部对数据的控制方式。 受控组件： 受控组件的值受 React 组件的状态（state）控制。 组件的值由 React 组件的 state 属性管理，并通过 props 将其传递给组件。 当用户与组件交互时，例如输入表单
阅读全文
摘要：CSR 指的是客户端渲染（Client-Side Rendering）。在客户端渲染中，整个页面的渲染过程发生在用户的浏览器上，而不是在服务器上。在传统的服务器端渲染（SSR）中，服务器负责将页面的 HTML 内容完全渲染好，并将其发送给浏览器。但在客户端渲染中，浏览器会下载页面的初始 HTML 结
阅读全文
