ESLint- Plugin- React- Uservation 邮件
此插件执行对复杂对象或函数的包接( 可能产生不必要的使出或副作用) useMemo 或者说 useCallback。它也允许您在程序上强制将功能组件包到 memo,并且所有的道具和依赖性都被包裹在 useMemo编号 :useCallback。 。 。 .
目的
其目的是确保您的应用程序组件树和/或昂贵的生命周期(如React Industrial's FlatLists,使用效果,使用Memo等)只有在绝对必要时才能重新计算或再做. 通过控制昂贵的表达式,可以实现应用程序的最佳可缩放性和性能.
说明: 各地不建议使用记忆,因为每一件事都有代价。 过度使用记忆 可能会减缓你的应用 而不是加速它.
纪念准则
详情请参见React's 文档 在钩子上, 重新投降和回忆.
动态对象应当被记住的情况有两项主要规则:
-
返回非主对象或函数作为道具传递到其他组件的变量或表达式.
错误
function Component({ incomingData }) { const complexData = { ...incomingData, checked: true, }; // generated each render, breaks hooks shallow comparison return <SomeComponent data={complexData} />; }对
function Component({ incomingData }) { const complexData = useMemo( () => ({ ...incomingData, checked: true, }), [incomingData], ); // generated only when incomingData changes return <SomeComponent data={complexData} />; } -
从自定义钩返回的非原始对象的变量或表达式.
错误
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). }对
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. }
建议在下列情况下不使用备忘录:
-
当产生的值(表示值或可变值)为原始值(字符串,数字,布尔值).
错误
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} />; }对
function Component() { const width = someValue * 10; return <SomeComponent width={width} />; } -
如果将道具传递给框架的原生成分(如Div,可触等),除了在某些情况下反应-原生成分(如FlatList)外.
错误
function Component() { const onClick = useCallback(() => {}, []); return <div onClick={onClick} />; }对
function Component() { const onClick = () => {}; return <div onClick={onClick} />; } -
可以在反应背景之外成为全局/背景的值. 错误
function Component() { const breakpoints = [100]; return <Modal breakpoints={breakpoints}> }对
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: 直接使用插件
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:使用建议配置
import { flatConfig } from "@arthurgeron/eslint-plugin-react-usememo";
export default [
flatConfig.configs.recommended,
];
备选案文3:通用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 迁移指南。 。 。 .
实例
关于ESLint v9(平面配置)的示例,请检查 示例目录。 。 。 .
规则一: require-usememo (建议)
此规则需要复杂的值(对象,阵列,函数,和JSX),这些被传递道具或作为钩子依赖物被包裹在使用Memo()或使用Callback().
这个规则的一大特点是它的惊人的自定义功能. 它以使用Memo()或使用Callback()来智能地包裹必要的组件,使您的代码更加有效并节省了宝贵的时间.
关于详细实例、本规则的选项以及关于自动固定功能的信息,请参见我们 规则文档。 。 。 .
规则2: require-memo
此规则要求所有函数组件被包入 React.memo()。 。 。 .
关于这一规则的详细例子和使用,请参见我们 规则文档
规则3: require-usememo-children
这一规则要求作为儿童传递的复杂价值(对象、阵列、功能和JSX)被包裹在其中 useMemo() 或者说 useCallback()。 。 。 .
本条细则的详细例子和备选方案,请参见: 规则文档。 。 。 .
捐款
这个项目使用 雅伦 作为它的软件包管理器。 A 类 preinstall 脚本会拒绝 npm install 以保持锁文件的一致性——请使用 yarn install 在本地工作的时候.
结论
通过有效利用 useMemo, (中文(简体) ), useCallback,以及 React.memo(),我们可以优化我们的回放和回放 原住民应用。 它使我们能够控制组件的再计算和再交付,提供更好的可扩展性和性能.