重构 React 应用程序
除了 常见的 PyCharm 重构 之外，在 React 应用程序中，您还可以对 React 组件执行 重命名 ，并使用 提取组件 创建新组件。
重命名组件
下面是对仅在单个文件中定义并使用的组件进行重命名的示例：
同样，您可以重命名在一个文件中定义并通过命名导出导入到另一个文件的组件：
将插入符号置于组件名称内，然后按 Shift+F6 ，或从上下文菜单中选择 。
请遵循 React 命名约定 指定新的组件名称。
重命名 state 值
当您重命名 state 值时，PyCharm 会建议重命名相应的 setter（在 React useState Hook 中更新此 state 值的函数）。
将插入符号置于 state 值的名称内，然后按 Shift+F6 ，或从主菜单或上下文菜单中选择 。
指定新的值名称并按 Enter。 插入符号会移动到 setter，在其中会建议新的值名称。 按 Enter 接受建议。
提取组件
您可以通过从现有组件的 render 方法中提取 JSX 代码来创建新的 React 组件。 新组件可以定义为函数或类，请参阅 React 官方网站上的 函数式组件与类组件。
选择要提取的代码，然后从上下文菜单中选择 。
或者，在主菜单中转到 ，或按 Ctrl+Alt+Shift+T 并在弹出窗口中选择 提取组件。
在打开的对话框中，指定新组件的名称及其类型。 默认情况下，会创建函数式组件。 如果您想将新组件定义为类，请选择 类。
单击 确定。 新组件将定义在现有组件旁边，并在其中使用。
可选： 使用 移动符号重构 将新组件和所有所需的导入移动到单独的文件中。
可选： 修改 PyCharm 用于新组件的代码模板。 在 设置 对话框（Ctrl+Alt+S ）中，转到 ，打开 代码 选项卡，并使用 Apache Velocity 模板语言 根据需要更新模板。
将函数转换为类组件
借助 转换为类组件 重构， PyCharm 会生成一个以您要转换的函数命名的 ES6 类。 该类继承自 React .Component ，并包含一个 render() 方法，函数体会被移动到其中。 详细了解请参阅 React 官方网站。
将插入符号置于要转换的函数内的任意位置，然后从主菜单或上下文菜单中选择 。
或者，按 Ctrl+Alt+Shift+T 并在弹出窗口中选择 转换为类组件。
将类转换为函数式组件
借助 转换为函数式组件 重构， PyCharm 会生成一个以您要转换的类命名的函数，并将 render() 方法的内容移动到函数体中。
将插入符号置于要转换的类内的任意位置，然后从主菜单或上下文菜单中选择 。
或者，按 Ctrl+Alt+Shift+T 并在弹出窗口中选择 转换为函数式组件。
React 应用程序中的解构
解构让您可以轻松地将数组和对象中的值解包到变量中。 此功能具有非常简洁的语法，当您需要在应用程序中传递数据时经常使用。
在处理 React 类组件时，请考虑使用 引入对象/数组解构 意图操作。 详细了解请参阅 Destructuring in JavaScript。
