开发 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

相关推荐
不收藏找不到我几秒前
浏览器交互事件汇总
前端·交互
YBN娜14 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=15 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck19 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!40 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架