使用WebStorm插件React Buddy提高React开发效率（快捷键篇）

React Buddy是IntelliJ IDE 的高级插件，具有可视化工具和代码提示，使开发效率更高，本文将介绍代码提示以及常用的快捷键操作。

安装React Buddy插件

要在WebStorm编辑器中安装React Buddy插件，可以按照以下步骤操作：

在WebStorm编辑器顶部，我们会找到工具栏。请定位到工具栏的右侧，那里有一个设置按钮（通常显示为齿轮图标）。点击此设置按钮，将弹出一个菜单。
在弹出的菜单中，选择"插件"选项，以打开"插件窗口"。此外，我们还可以使用快捷键 Ctrl+alt+S 来快速打开插件窗口。

打开插件窗口后，点击位于窗口顶部的"Marketplace"选项卡。在Marketplace的搜索框中输入"react buddy"，然后在搜索结果中找到React Buddy插件。找到插件后，单击"安装"按钮以开始安装过程。

安装完成后，WebStorm编辑器会提示我们重启。按照提示重启编辑器，以便完成插件的安装。

如果我们在搜索React Buddy插件的过程中遇到问题，比如插件列表加载缓慢或者插件安装失败，那么我们可以直接访问该插件在JetBrains插件商店的官方页面：plugins.jetbrains.com/plugin/1746... 并从那里下载插件。在下载时，请确保我们选择的是与我们当前编辑器版本兼容的插件版本。

React Buddy插件的功能

以下是React Buddy插件的一些主要特点以及它们的使用方法：

创建组件文件

通过右键点击项目中的components目录，从弹出菜单中选择 新建 -> React 组件 来创建一个新的组件文件。

这会弹出一个对话框，在其中选择组件类型（如箭头函数组件、函数组件或类组件），输入组件的名称（例如 Demo），然后创建。

创建完成后，Demo.tsx 文件会出现在 components 目录中，并含有一个使用箭头函数声明的Demo组件。

快速创建State

输入 usest 展开相应的代码片段，并在顶部从react依赖包中导入useState，我们以快速创建 count 状态为例：

快速创建Effect

输入 usee 展开相应的代码片段，展开提示即可快速创建 useEffect ，并在顶部从react依赖包中导入 useEffect：

映射数组

例如我们当前有如下代码：

typescript 复制代码

import {useEffect, useState} from "react";

interface Car {
    id: number,
    name: string
}

export const Demo = () => {
    const [cars, setCars] = useState<Car[]>();
    useEffect(() => {
        setCars([
            {
                id: 1,
                name: '大众'
            },
            {
                id: 2,
                name: '宝马'
            },
        ])
    }, []);
    if(!cars){
        return 'loading...'
    }
    return (
        <div>
            
        </div>
    );
};

当我们要遍历cars时，我们在大括号中输入cars.map即会出现代码提示，展开相应的代码片段即可快速生成一个带有key属性的map

事件处理函数

将输入光标放在想要添加事件的标签处。按下 Alt+Enter 快捷键来调出上下文菜单。从弹出的菜单中，选择 生成处理函数。React Buddy会提示我们选择一个事件类型，例如 onClick。选择 onClick 后，插件会自动为我们创建一个事件处理函数的声明并在组件内部使用它。同时，它还会从React库中导入 useCallback 钩子，并使用它来包装我们的事件处理函数。

如果我们已经在组件中写了 onClick={} 属性，可以在此处按下 Alt+Enter，然后选择 生成处理函数。React Buddy插件将会识别出我们需要一个新的事件处理函数，并按照上述过程为创建它。

创建Ref

将光标位置放在希望关联Ref的标签上。按下 Alt+Enter 快捷键，这会触发一个上下文菜单。在弹出的菜单中，选择 创建Ref 选项。插件会自动为我们生成一个新的Ref，同时，它还会从React库中导入 useRef 钩子

提取为组件

在编辑器中选中要提取的JSX代码。右键点击选中的代码，然后在弹出的菜单中选择 重构 -> 提取组件。在提取组件对话框里，我们可以修改新组件的名称和类型（类、函数）。点击 确定 按钮后，所选中的内容将被提取到一个独立的新组件中。

将组件移动为外部文件

将输入光标放在要移动的组件名称上。按下 Alt+Enter 在弹出的菜单中选择 将函数xxx移至文件xxx.tsx。这将创建一个新的文件，并自动将选中的组件转移到这个文件中。

组件中新增字符串prop

当我们为一个组件添加一个新的、未声明的字符串属性时，按下 Alt+Enter。在弹出的上下文菜单中，选择 在xxxx中创建xxxx prop。插件会自动在组件中新增prop的TypeScript类型声明，并进行prop解构赋值。

组件中新增事件prop

同上，如果属性是一个箭头函数，React Buddy会识别出我们正在尝试添加一个事件处理器。与添加字符串prop类似，按 Alt+Enter 然后选择相应的提示来创建该事件属性。插件将为我们处理TypeScript类型声明和参数类型的设置。

将组件中的事件用 useCallback 包装

将输入光标放在我们想要优化的事件处理函数的箭头函数参数或箭头符号上。按下 Alt+Enter，然后选择弹出菜单中的 "使用useCallback()包装" 选项。该操作将自动将事件处理函数提取出来并使用 useCallback 钩子进行包装，减少不必要的重渲染。

使用 memo 包装组件

把光标放在我们想要优化的组件名称上。按下 Alt+Enter 并在弹出菜单中找到并选择 "使用memo()包装" 选项。插件会为我们自动将该组件包裹在 memo 函数中。