导入 React 和 ReactDOM

Question

在导入 React 和 ReactDOM 时，我经常看到以下写法：

import React from 'react';
import ReactDOM from 'react-dom';

我可以将React和ReactDOM改名为其他名称吗？

- tausabao

Answer 1

React

对于React，你必须使用import React from 'react'导入。你需要导入默认值，并将其命名为React。这是因为每当你编写像<MyComponent />或<App />这样的JSX代码时，这些JSX代码会被转换并使用React.createElement()。因此，你需要访问以该名称命名的React对象。

ReactDOM

然而，对于ReactDOM，你可能更关心与默认导出相关的DOM方法，例如render()或hydrate()等方法。因为这可能是你将要使用的，你可以按任何你想要的方式命名你的导入模块。因此，你可以这样做：

import FooBar from 'react-dom'
FooBar.render(someElement)

这段代码确实可以运行，但是标准惯例是将导入的模块命名为ReactDOM，这样其他人查看你的代码时就更容易理解。

---

附加资源：

• ES6语法和import的用法
• JSX的Babel转换需要React
• ReactDOM文档

- Alvin S. Lee

---

仅供更新：React 17和一些旧的指定主要版本现在包括一个新的JSX转换，不需要这个显式的React导入。请参阅https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html。 - kmui2