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