开发 react 的时候还在申明 import React from 'react' ?

首先要知道一个事情: JSX 是无法直接运行在浏览器环境

为何要 import React from 'react'?

JSX 语法不能直接被浏览器解析和运行,因此需要插件 @babel/plugin-transform-react-jsx 来转换语法,使之能够在浏览器或任何 JavaScript 环境中执行。

所以 React 组件需要引入React的一个主要原因是:在组件中使用 JSX 时,JSX 语法最终会被 Babel 编译成使用React.createElement方法的 JavaScript 代码。也就是说,任何使用 JSX 的 React 组件的背后都隐含了React.createElement的调用。

例如,当你编写如下的 JSX 代码:

jsx 复制代码
const MyComponent = () => {
  return <div>Hello, World!</div>;
};

Babel 会将这段 JSX 编译为如下的 JavaScript 代码:

javascript 复制代码
const MyComponent = () => {
  return React.createElement("div", null, "Hello, World!");
};

由于编译后的代码调用了React.createElement,因此你需要在文件顶部导入React对象才能使用它。即使你在组件中并没有直接使用React对象,编译后的代码依赖于React的运行时。

Babel 7.0+ & React 17+ , 可以不再需要 import React

在 Babel 7.0 版本之后,@babel/plugin-transform-react-jsx 插件还支持一个自动模式,它可以自动引入 JSX 转换所需的React包,无需手动在每个文件中添加 import React from 'react'

注意,随着 React 17 的新 JSX 变换,它们引入了一个新的 JSX 转换方式,这在新的 Babel 插件 @babel/plugin-transform-react-jsx@babel/preset-react 中得到了支持。这意味着在写 JSX 时,你不再需要导入 React。这个插件现在接收一个 { runtime: 'automatic' } 选项来启用这一特性。

举个例子,在使用新的 JSX 转换之后,编译器将会自动引入 JSX 的运行时库,而不是 React,例如对于一个使用了新转换的MyComponent的组件:

jsx 复制代码
// React 17+ 及支持新JSX转换的环境,可以不需要显式写这行
// import React from 'react';

const MyComponent = () => {
  return <div>Hello, World!</div>;
};

在新的转换下,你会看到类似import { jsx as _jsx } from 'react/jsx-runtime'的东西或者类似的别名,被自动插入到转译后的文件中,而不再是直接的React.createElement调用。这就是为什么在新版本的 React 中,你可能不再需要手动导入 React 了。

补充一个细节知识点: plugin-transform-react-jsx@babel/preset-react` 是啥关系

它们是包含关系@babel/preset-react 包括了 @babel/plugin-transform-react-jsx

@babel/plugin-transform-react-jsx@babel/preset-react 都是 Babel 插件,它们在处理 React 项目中的 JSX 代码方面有关联,但它们的用途和包含的内容有所不同。

  1. @babel/plugin-transform-react-jsx : 这是一个特定的 Babel 插件,它的功能就是将 JSX 语法转换为React.createElement 调用。随着 React 17 的更新,它还允许使用新的 JSX 转换,无需导入 React 就可以使用 JSX。这意味着,在文件中不再需要 import React from 'react' 语句了,就可以使用 JSX。

    这个插件通常用于开发者想要精细控制某个具体转换功能时。如果你只需要转换 JSX 语法,但不需要处理其他与 React 相关的转换或优化,你可能会单独使用这个插件。

  2. @babel/preset-react : 这是一个 Babel 预设,它是一组 Babel 插件的集合,旨在为 React 项目提供所需的全部 Babel 插件。@babel/preset-react 包括了 @babel/plugin-transform-react-jsx,但它还包含了其他一些插件,如处理 React 的显示名称的 @babel/plugin-transform-react-display-name,以及为开发模式和生产模式添加/删除某些代码的插件。

    预设的好处是简化了配置过程。开发者可以在 Babel 的配置中一次性添加 @babel/preset-react,而不是单独添加每一个与 React 相关的 Babel 插件。此外,预设将维护这些插件的正确版本和顺序,这有助于避免潜在的配置错误。

在实践中,大多数开发 React 应用的开发者会使用 @babel/preset-react 因为它提供了一个即插即用的 Babel 环境,无需担心各个插件的具体细节。但是也有些情况下,为了更细致的优化和控制,开发者可能会选择手动添加特定的插件,包括 @babel/plugin-transform-react-jsx

相关推荐
雯0609~7 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ11 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z16 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
程序猿进阶31 分钟前
堆外内存泄露排查经历
java·jvm·后端·面试·性能优化·oom·内存泄露
彭世瑜40 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40441 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish41 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five43 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序43 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54143 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript