重构 React 应用程序
除了 common PhpStorm refactorings之外，在 React 应用程序中，您还可以对 React 组件运行 Rename ，并使用 Extract Component创建新组件。
重命名组件
下面是重命名仅在一个文件中定义和使用的组件的示例：
同样地，您可以重命名在一个文件中定义并使用命名导出导入到另一个文件的组件：
将光标放在组件名称内并按 Shift+F6 或从上下文菜单中选择 。
请指定符合 React 命名规范的新组件名称。
重命名状态值
当您重命名状态值时，PhpStorm 会建议您重命名相应的 setter（此函数在 React useState hook 中更新该状态值）。
将文本光标置于状态值的名称内，然后按 Shift+F6 或从主菜单或上下文菜单中选择 。
请指定新的值名称并按 Enter。 焦点移动到 setter，其中建议了该值的新名称。 请按 Enter 以接受建议。
提取组件
您可以通过从现有组件的 render 方法中提取 JSX 代码来创建一个新的 React 组件。 新组件可以定义为函数或类，请参阅 React 官方网站上的 Function and Class Components。
请选择您要提取的代码，然后从上下文菜单中选择 。
或者，前往主菜单中的 或按下 Ctrl+Alt+Shift+T 并从弹出窗口中选择 提取组件。
在打开的对话框中，指定新组件的名称及其类型。 默认情况下，将创建一个函数组件。 如果您想将新组件定义为类，请选择 类。
点击 确定。 新的组件将被定义在现有组件旁边并在其中使用。
可选：使用 Move Symbol refactoring将新组件和所有必需的导入移动到一个单独的文件。
可选：修改 PhpStorm 用于新组件的代码模板。 在 设置 对话框中(Ctrl+Alt+S )，转到 ，打开 代码 选项卡，并使用 Apache Velocity 模板语言根据需要更新模板。
将函数转换为类组件
通过 Convert to Class Component重构，PhpStorm 生成一个具有您想要转换的函数名称的 ES6 类。 该类扩展了 React .Component ，并包含一个 render() 方法，其中函数体被移动。 从 React 官方网站 了解更多信息。
将文本光标放置在要转换的函数内的任意位置，然后从主菜单或上下文菜单中选择 。
或者，按 Ctrl+Alt+Shift+T 并从弹出窗口中选择 转换为类组件。
将类转换为函数组件
使用 Convert to Functional Component 重构，PhpStorm 会生成一个具有您要转换的类名的函数，并将 render() 方法的内容移至函数体。
将文本光标置于要转换的类中的任意位置，然后选择主菜单或上下文菜单中的 。
或者，按 Ctrl+Alt+Shift+T 并从弹出窗口中选择 转换为函数组件。
在 React 应用中的解构
解构让您可以轻松地将数组和对象中的值解包到变量中。 此功能具有非常简洁的语法，通常在需要在您的应用程序中传递数据时使用。
在使用 React 类组件时，考虑使用 Introduce object/array destructuring 意图操作。 了解更多关于 JavaScript 解构的信息。
