[React]为什么写React组件的时候,需要先引入React?

2023-11-14

React相信各位伙伴都不陌生,那么你的React技术还好吗?来跟我一起重学一遍React,看看有什么知识是你没有记住的呢?一起来查漏补缺下~

目录

为什么有的React页面及组件在写的时候需要引入 React?

为什么会出现这个问题?

React 最新的编译


相信各位经常写React的伙伴可能会有这个一个疑问

为什么有的React页面及组件在写的时候需要引入 React?

如:

import React from 'react'

const Index = () => {
    return <div>主页</div>
}

export defult Index

其实许多人知道这个答案

在react 老版本中 因为 jsx 在被 babel 编译后,写的 jsx 会变成上述 React.createElement 形式,所以需要引入 React,防止找不到 React 引起报错。

是的,因为react在编辑的时候,写的jsx会被编译成React.createElement,所以这时候如果不引入React,则js会报错 找不到React。

为什么会出现这个问题?

举个例子来,如下:

import React from 'react'
const Index = () => {
    return <div>hello,react</div>
}
export default Index

上述代码是react的一个页面/或者组件。

那么它在被babel编译之后是什么样子呢?

React.createElement("div", null,
        React.createElement("div", null, "hello,React")
    )

没错就会变成React.createElement 这样的形式。所以如果你不引入react的话,则默认react是找不到的既然会报错。

但是大家要注意的是,从React最新之后,我们再也不用引入React了。

因为:新版本已经不需要引入createElement,我们看一下它是如何做的?

React 最新的编译

const Index = () =>{
    return <div>
        <div>hello,world</div>
        <div>初学jsx</div>
    </div>
}

而被编译后则为:

而它的编译文件则是从下图所示这里引入

 大家会发现,脚手架已经自己为我们引入了一个来处理jsx的文件。所以我们无需再去操心react没有引入的问题。

简单来说就是利用正则对jsx进行了一层浅的转化,本质jsx是对js的一种扩展。有兴趣的伙伴可以深入了解。

react-jsx-dev-runtime

若是大家还有疑问可以留言探讨哦~

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

[React]为什么写React组件的时候,需要先引入React? 的相关文章

  • Crypto-Js 库的 hmac-256 脚本返回函数结构而不是 Google Apps 脚本中的值,在外部工作正常吗?

    我正在设置一个谷歌电子表格项目来连接到我的 CryptoExchange API 但是当涉及到这个简单的 CryptoJs Hmac sha256 脚本时 它不起作用 它返回函数结构而不是值 而在外部它工作正常 看我的jsfiddle ht
  • 我可以动态创建/销毁 Vue 组件吗?

    因此 我正在创建一个相当复杂的 Vue 应用程序 它从后端 API 获取数据并将其显示在前端 具体取决于用户选择的过滤器 它的默认设置是立即显示所有内容 然后一旦用户选择过滤器 它就会拉出不具有这些属性的 卡片 组件 直到今天 一切都很顺利
  • 如何强制折断不可折断的字符串?

    我有一个根据数据库中包含的数据生成的 HTML 页面 数据库有时包含浏览器无法分解的长字符串 因为这些字符串不包含可分解的字符 空格 点 逗号等 有没有办法使用 html css 甚至 javascript 来解决这个问题 看到这个link
  • Angularjs 完整日历不显示事件

    我正在用那个https github com angular ui ui calendar https github com angular ui ui calendar在 Angularjs 中使用 FullCalendar 它显示日历并
  • ReactJS - Redux Form - 如何根据单选字段元素有条件地显示/隐藏元素?

    我对 Redux 比较陌生 我有一个表单 其中有一些无线电输入 是 或 否 基本上 我想根据该无线电输入选择有条件地显示包含另一个 redux 表单字段的另一个元素 有直接的方法可以做到这一点吗 我想检查一下formProps site v
  • html canvas动画卡顿

    谁能解释为什么提供的画布动画断断续续 我创建了一个测试存根来演示该问题 我在桌面上的 FF Chrome IE 以及 Android 上的 FF 和 Chrome 中看到了卡顿现象 口吃是由于垃圾收集造成的吗 似乎 raf 在每次调用时都会
  • 为什么我们使用 SpreadsheetApp.flush()?

    我的理解是 flush https developers google com apps script reference spreadsheet spreadsheet app flush有助于在功能发生时执行这些功能 而无需将它们捆绑在
  • Firebase 身份验证在 iOS 登录时卡住,没有错误

    我已经使用电子邮件和密码设置了 firebase 身份验证登录的最基本实现 firebase auth signInWithEmailAndPassword email password then gt console log Logged
  • 类型“void”不可分配给类型“((event:MouseEvent) => void) |不明确的'

    import as React from react import App css import PageTwo from components PageTwo export interface IPropsk data Array
  • 如何知道浏览器空闲时间?

    如何跟踪浏览器空闲时间 我用的是IE8 我没有使用任何会话管理 也不想在服务器端处理它 这是纯 JavaScript 方法来跟踪空闲时间 并在达到一定限制时执行一些操作 var IDLE TIMEOUT 60 seconds var idl
  • 将 window.location 传递给 Flask url_for

    我正在使用 python 在我的页面上 当匿名用户转到登录页面时 我想将一个变量传递到后端 以便它指示用户来自哪里 发送 URL 因此 当用户单击此锚链接时 a href Sign in a 我想发送用户当前所在页面的当前 URL
  • 尝试使用 Firebug 查找 JavaScript 文件中的函数

    我试图找到这个函数调用 myFooBar 该函数在某些 HTML 中内联引用 但页面加载了大量 JavaScript 并且在每个文件中搜索该函数需要相当多的工作 如何使用 Firebug 找到此函数所在的 JavaScript 文件 打开脚
  • 为什么 Array.prototype.filter() 在 Magnolia JavaScript 模型中抛出错误?

    我正在尝试过滤 FreeMarker 列表Magnolia JavaScript 模型 https documentation magnolia cms com display DOCS61 How to work with JavaScr
  • JavaScript 提升解释

    下面的片段有什么区别 var a 0 function b a 10 return function a b console log a gt 10 and var a 0 function b a 10 return function a
  • Outlook 加载项,无法读取未定义的属性“BeginRequestEventArgs”

    我使用 Visual Studio 开发了 Outlook 插件 我的插件有一个按钮 用于填充会议邀请正文中的详细信息并添加所需的与会者 这在 99 的情况下都有效 但是 时不时地它会给我下面的 JavaScript 错误 Uncaught
  • Javascript onload 不起作用[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我正在使用
  • 检测浏览器选项卡是否具有焦点

    是否有可靠的跨浏览器方法来检测选项卡是否具有焦点 场景是 我们有一个定期轮询股票价格的应用程序 如果页面没有焦点 我们可以停止轮询并为每个人节省流量噪音 特别是当人们喜欢打开具有不同投资组合的多个选项卡时 Is window onblur
  • D3 将现有 SVG 字符串(或元素)追加(插入)到 DIV

    我到处寻找这个问题的答案 并找到了一些我认为可能有用的资源 但最终没有让我找到答案 这里有一些 外部SVG http bl ocks org mbostock 1014829 嵌入SVG https stackoverflow com qu
  • DOM 解析器 Chrome 扩展内存泄漏

    问题 我开发了一个扩展程序 可以拦截 Web 请求 获取 Web 请求来源的 HTML 并对其进行处理 我使用 DOMParser 来解析 HTML 并且意识到 DOMParser 正在导致大量内存泄漏问题 最终导致 chrome 扩展崩溃
  • 用javascript调用外部网页(跨域)

    我正在尝试使用以下网络服务来验证提要这个问题 https stackoverflow com questions 11996430 check if a url is a valid feed 但浏览器不允许我向另一台服务器发送 ajax

随机推荐

  • waf 绕过之[RoarCTF 2019]Easy Calc1(还运用了chr代替)

    打开题目 查看源码 发现有PHP文件 打开发现 这是一道审计代码传参题 需要构造num 然而num不允许传字母进去 会报错 这就为什么会有WAF的知识呢 不懂 然后WAF的绕过 在num前加空格就可以了 这样waf就找不到num这个变量了
  • __dict__属性

    dict 是 Python 中的一个特殊属性 通常存在于大多数 Python 对象中 用于存储该对象的可变属性 以下是关于 dict 的一些关键点和详细信息 存储属性 对于大多数自定义的 Python 对象 dict 属性包含了这个对象的属
  • 信息学奥赛一本通C++语言——1163:阿克曼(Ackmann)函数

    题目描述 阿克曼 Ackmann 函数A m n 中 m n定义域是非负整数 m 3 n 10 函数值定义为 a k m m n n 1 m 0 时 a k m m 1 1 m gt 0 n 0 时 a k m m 1 a k m m
  • GNN论文周报|来自北航、港大、UIUC等机构前沿论文研究

    图神经网络 GNN 是一类专门针对图结构数据的神经网络模型 在社交网络分析 知识图谱等领域中取得了不错的效果 近来 相关研究人员在GNN的可解释性 架构搜索 对比学习等方面做了很多探究 本周精选了10篇GNN领域的优秀论文 来自北航 港大
  • 算法基础:素数环

    题目描述 一个环由n个圈组成 将自然数1 n放入圈内 使得任意相邻圈的两个数之和均为素数 第一个圈的元素均为1 下图为n 6时的一个例子 程序样例 输入为一个整数n 6 8 输出分别为 1 4 3 2 5 6 1 6 5 2 3 4 1 2
  • window10 几款好用的屏幕录制制作动图工具

    有时候静态图片不能够展示交互效果 需要录制一下视频 所以就去网上找了几个好用的屏幕录制软件 一 GifCam GifCam录制视频很方便 打开软件 将窗口拖动到需要录制的地方 点击 Rec 就可以开始录制 在录制的过程中 可以随意的改变窗口
  • SpringBoot之RESTful 接口的实现以及Postman的使用

    SpringBoot实现Restful以及Postman的使用 1 HTTP相关知识 1 1 HTTP 工作原理 1 2 HTTP请求过程 1 3 HTTP请求的方法 2 Restful接口的使用 2 1 Restful风格API 2 2
  • c++随笔-删除文件

    c 删除文件非常简单 只需remove 文件名 即可 需要包含 include
  • java servlet json_Java HttpServlet Json 数据交互

    Android 对其访问进行封装 服务端 packagecom server importjava io PrintWriter importjavax servlet annotation WebServlet importjavax s
  • Rabbit的工作(2)【牛客练习赛36_C + dp背包】

    题目链接 那么的巧合 竟是这题的原题 就是 我们既然一定要选取K个任务 就先去取K个任务 然后逐一加上需要的额外天数即可 include
  • 上采样和下采样层 nn.pixelshuffle and nn.pixelunshuffle

    前言 理论部分后面有空的时候补一下 这里先放代码和简要说明 Downsample 这里先对channel维度降低为原来 1 2 1 2 1 2 然后再对channel维度提升 r
  • 高级JAVA开发 MQ部分

    高级JAVA开发 MQ部分 MQ MQ的作用 为什么要用MQ 常见的MQ的优缺点 使用MQ带来的问题以及处理办法 MQ带来的问题列举 消息重复消费 幂等 问题 消息丢失问题 消息顺序性问题 消息过期丢失 大量积压等问题 如何保证MQ高可用性
  • 斯坦福小镇升级版——AI-Town搭建指南

    导语 8月份斯坦福AI小镇开源之后 引起了 AIGC 领域的强烈反响 但8月份还有另一个同样非常有意义的 AI Agent 的项目开源 a16z主导的 AI Town 本篇文章主要讲解如何搭建该项目 如有英文基础或者对这套技术栈熟悉 可直接
  • 用list列表以行方式创建DataFrame

    DataFrame默认会将一维list作为列处理 需要将一维list转为二维才能实现想要的效果 A 1 2 3 4 5 直接pd DataFrame a 得到的是一个1列5行的df 正确方式是 pd DataFrame A 原文链接 htt
  • 个人博客系统(附源码)

    前面学习了那么多的理论知识 一直比较枯燥 今天就做个小项目 来检验一下前面的学习成果吧 有需要源代码的小伙伴可以来看看 个人博客系统 这个小项目主要是模仿CSDN做的 但是功能还是比较少的 只是写出了一些主要的功能 下面就一起来看看吧 目录
  • Merge AVHD with VHD

    AVHD is a file created when you perform snapshot Once you delete the snapshot and shutdown the Virtual Machine automatic
  • Protobuf类型

    1 基本类型 这些是原始的基本数据类型 用于存储数值和字符串 包括 double 双精度浮点数 float 单精度浮点数 int32 32 位有符号整数 int64 64 位有符号整数 uint32 32 位无符号整数 uint64 64
  • centos7升级gcc10.1.0,gdb9.2

    https www gnu org prep ftp html 先找一个亚洲的镜像站点 选一个站点 打开gcc或者gdb目录 选择自己想要安装的版本 我这里选择的gcc 10 1 0和gdb 9 2 http mirrors nju edu
  • smart bi 学习

    Smartbi 安装 部署 测试 官方文档 数据连接 关系数据库 选择数据连接选关系数据库 配置 连电脑本地的数据库 用户名 密码 root root 端口 3306 ip localhost mysql 数据库选的lyj 1 数据库管理
  • [React]为什么写React组件的时候,需要先引入React?

    React相信各位伙伴都不陌生 那么你的React技术还好吗 来跟我一起重学一遍React 看看有什么知识是你没有记住的呢 一起来查漏补缺下 目录 为什么有的React页面及组件在写的时候需要引入 React 为什么会出现这个问题 Reac