# @arthurgeron/eslint-plugin-react-usememo 中文文档

规范地址：https://npmcn.com/package/%40arthurgeron/eslint-plugin-react-usememo/

版本：3\.0\.1
npm 元数据更新时间：2026-05-11T02:15:20.989Z
中文译文更新时间：2026-11-06T21:01:48.002Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40arthurgeron/eslint-plugin-react-usememo
原文对照：https://npmcn.com/package/%40arthurgeron/eslint-plugin-react-usememo/?lang=original
项目主页：https://github.com/arthurgeron/eslint-plugin-react-usememo#readme
源码仓库：https://github.com/arthurgeron/eslint-plugin-react-usememo

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：826 kB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- peer 依赖：eslint ^9\.0\.0
- 首次发布：2022-07-21T22:35:55.545Z
- 最新版本发布：2026-05-11T02:15:20.848Z
- 近 30 天下载量：63234（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：55（近 12 个月 2 个）

## 中文简介

此插件执行对复杂对象或函数的包接( 可能产生不必要的使出或副作用) `useMemo` 或者说 `useCallback`。它也允许您在程序上强制将功能组件包到 `memo`,以及

## 安装

```sh
npm install @arthurgeron/eslint-plugin-react-usememo
```

也可以使用：`pnpm add @arthurgeron/eslint-plugin-react-usememo`、`yarn add @arthurgeron/eslint-plugin-react-usememo`、`bun add @arthurgeron/eslint-plugin-react-usememo`

## README

# ESLint- Plugin- React- Uservation 邮件

此插件执行对复杂对象或函数的包接( 可能产生不必要的使出或副作用) `useMemo` 或者说 `useCallback`。它也允许您在程序上强制将功能组件包到 `memo`,并且所有的道具和依赖性都被包裹在 `useMemo`编号 :`useCallback`。 。 。 .

## 目的

其目的是确保您的应用程序组件树和/或昂贵的生命周期(如React Industrial's FlatLists,使用效果,使用Memo等)只有在绝对必要时才能重新计算或再做. 通过控制昂贵的表达式,可以实现应用程序的最佳可缩放性和性能.

_**说明:**_ 各地不建议使用记忆,因为每一件事都有代价。 过度使用记忆 可能会减缓你的应用 而不是加速它.

## 纪念准则

> 详情请参见React's [文档](https://react.dev/reference/react/useMemo) 在钩子上, 重新投降和回忆.

### 动态对象应当被记住的情况有两项主要规则:

1.  返回非主对象或函数作为道具传递到其他组件的变量或表达式.
    
    **_错误_**
    
    ```js
    function Component({ incomingData }) {
      const complexData = {
        ...incomingData,
        checked: true,
      }; // generated each render, breaks hooks shallow comparison
    
      return <SomeComponent data={complexData} />;
    }
    ```
    
    **_对_**
    
    ```js
    function Component({ incomingData }) {
      const complexData = useMemo(
        () => ({
          ...incomingData,
          checked: true,
        }),
        [incomingData],
      ); // generated only when incomingData changes
    
      return <SomeComponent data={complexData} />;
    }
    ```
    
2.  从自定义钩返回的非原始对象的变量或表达式.
    
    **_错误_**
    
    ```js
    function useMyData({ incomingData }) {
      const parsedData = parseData(incomingData); // generated each render
    
      return parsedData; // Will result in loops passed as a dependency in other hooks(e.g. useMemo, useCallback, useEffect).
    }
    ```
    
    **_对_**
    
    ```js
    function useMyData({ incomingData }) {
      const parsedData = useMemo(() => parseData(incomingData), [incomingData]); // generated only when incomingData changes
    
      return parsedData; // Won't generate loops if used as a dependency in hooks.
    }
    ```
    

### 建议在下列情况下不使用备忘录:

-   当产生的值(表示值或可变值)为原始值(字符串,数字,布尔值).
    
    **_错误_**
    
    ```js
    function Component() {
      const width = useMemo(() => someValue * 10, []); // results in integer, wouldn't break hooks' shallow comparison; Memoizing this would only reduce performance
    
      return <SomeComponent width={width} />;
    }
    ```
    
    **_对_**
    
    ```js
    function Component() {
      const width = someValue * 10;
    
      return <SomeComponent width={width} />;
    }
    ```
    
-   如果将道具传递给框架的原生成分(如Div,可触等),除了在某些情况下反应-原生成分(如FlatList)外.
    
    **_错误_**
    
    ```js
    function Component() {
      const onClick = useCallback(() => {}, []);
    
      return <div onClick={onClick} />;
    }
    ```
    
    **_对_**
    
    ```js
    function Component() {
      const onClick = () => {};
    
      return <div onClick={onClick} />;
    }
    ```
    
-   可以在反应背景之外成为全局/背景的值. **_错误_**
    
    ```js
    function Component() {
      const breakpoints = [100];
    
      return <Modal breakpoints={breakpoints}>
    }
    ```
    
    **_对_**
    
    ```js
    const breakpoints = [100];
    
    function Component() {
      return <Modal breakpoints={breakpoints}>
    }
    ```
    

## 安装

用纱线安装它 :

```
yarn add @arthurgeron/eslint-plugin-react-usememo --dev
```

或 npm 类型 :

```
npm install @arthurgeron/eslint-plugin-react-usememo --save-dev
```

## 兼容性

此插件针对ESLint v9+(平面配置). ESLint v8不再被支持. 该套件只暴露出被命名的出口.

### ESLint v9 配置 (eslint.config.js) 互联网档案馆的存檔,存档日期2014-10-02

#### 选项 1: 直接使用插件

```js
import { flatConfig } from "@arthurgeron/eslint-plugin-react-usememo";

export default [
  {
    files: ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
    languageOptions: {
      ecmaVersion: 2020,
      sourceType: "module",
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
    },
    plugins: {
      "@arthurgeron/react-usememo": flatConfig,
    },
    rules: {
      "@arthurgeron/react-usememo/require-usememo": "error",
      "@arthurgeron/react-usememo/require-memo": "error",
      "@arthurgeron/react-usememo/require-usememo-children": "error",
    },
  },
];
```

#### 备选案文2:使用建议配置

```js
import { flatConfig } from "@arthurgeron/eslint-plugin-react-usememo";

export default [
  flatConfig.configs.recommended,
];
```

#### 备选案文3:通用JS语法

```js
const { flatConfig } = require("@arthurgeron/eslint-plugin-react-usememo");

module.exports = [
  {
    plugins: {
      "@arthurgeron/react-usememo": flatConfig,
    },
    rules: {
      "@arthurgeron/react-usememo/require-usememo": "error",
      "@arthurgeron/react-usememo/require-memo": "error",
      "@arthurgeron/react-usememo/require-usememo-children": "error",
    },
  },
];
```

关于移民指导,请参见我们 [ESLint v9 迁移指南](https://github.com/arthurgeron/eslint-plugin-react-usememo/blob/main/docs/rules/eslint-v9-migration-guide.md)。 。 。 .

## 实例

关于ESLint v9(平面配置)的示例,请检查 [示例目录](https://github.com/arthurgeron/eslint-plugin-react-usememo/tree/main/examples)。 。 。 .

## 规则一: `require-usememo` **_(建议)_**

此规则需要复杂的值(对象,阵列,函数,和JSX),这些被传递道具或作为钩子依赖物被包裹在使用Memo()或使用Callback().

这个规则的一大特点是它的惊人的自定义功能. 它以使用Memo()或使用Callback()来智能地包裹必要的组件,使您的代码更加有效并节省了宝贵的时间.

关于详细实例、本规则的选项以及关于自动固定功能的信息,请参见我们 [规则文档](https://github.com/arthurgeron/eslint-plugin-react-usememo/blob/main/docs/rules/require-usememo.md)。 。 。 .

## 规则2: `require-memo`

此规则要求所有函数组件被包入 `React.memo()`。 。 。 .

关于这一规则的详细例子和使用,请参见我们 [规则文档](https://github.com/arthurgeron/eslint-plugin-react-usememo/blob/main/docs/rules/require-memo.md)

## 规则3: `require-usememo-children`

这一规则要求作为儿童传递的复杂价值(对象、阵列、功能和JSX)被包裹在其中 `useMemo()` 或者说 `useCallback()`。 。 。 .

本条细则的详细例子和备选方案,请参见: [规则文档](https://github.com/arthurgeron/eslint-plugin-react-usememo/blob/main/docs/rules/require-usememo-children.md)。 。 。 .

## 捐款

这个项目使用 **雅伦** 作为它的软件包管理器。 A 类 `preinstall` 脚本会拒绝 `npm install` 以保持锁文件的一致性——请使用 `yarn install` 在本地工作的时候.

## 结论

通过有效利用 `useMemo`, (中文(简体) ), `useCallback`,以及 `React.memo()`,我们可以优化我们的回放和回放 原住民应用。 它使我们能够控制组件的再计算和再交付,提供更好的可扩展性和性能.

## 常见问题

### @arthurgeron/eslint-plugin-react-usememo 是什么？

此插件执行对复杂对象或函数的包接\( 可能产生不必要的使出或副作用\) useMemo 或者说 useCallback。它也允许您在程序上强制将功能组件包到 memo,以及

### 如何安装 @arthurgeron/eslint-plugin-react-usememo？

在项目目录运行 npm install @arthurgeron/eslint-plugin-react-usememo，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：eslint（^9\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @arthurgeron/eslint-plugin-react-usememo 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/arthurgeron\_\_eslint-plugin-react-usememo 是否存在。

### @arthurgeron/eslint-plugin-react-usememo 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @arthurgeron/eslint-plugin-react-usememo 可以商用吗？

@arthurgeron/eslint-plugin-react-usememo 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @arthurgeron/eslint-plugin-react-usememo 的下载量有多少？

根据 npm 官方下载统计，@arthurgeron/eslint-plugin-react-usememo 在 2026/10/07 – 2026/11/05 这 30 天内被下载 63,234 次，日均约 2,108 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @arthurgeron/eslint-plugin-react-usememo 还在维护吗？

最新版本 3\.0\.1 发布于 2026/05/11（5 个月前）；至今共发布 55 个版本，其中过去 12 个月发布了 2 个；首次发布于 2022/07/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。