首页 > 编程语言 >何时使用JSX.Element vs ReactNode vs ReactElement?

何时使用JSX.Element vs ReactNode vs ReactElement?

时间:2024-04-21 14:55:16浏览次数:25  
标签:ReactElement ReactNode Element React vs 组件 JSX

在React开发中,JSX.ElementReactNodeReactElement 这三个类型分别代表不同级别的React组件树中的元素,它们在不同的上下文中有着各自的用途。
以下是它们的区别及使用场景的概述:

JSX.Element

定义
JSX.Element 是当你编写 JSX 语法时,编译器(如Babel)将这些语法转化为等效的 React.createElement() 调用所返回的对象类型。例如,以下 JSX 代码:

const myElement = <div>Hello, World!</div>;

在编译后实际上会变为:

const myElement = React.createElement("div", null, "Hello, World!");

这里的 myElement 类型就是 JSX.Element

使用场景

  • 作为组件的返回值:在React组件中,当你直接返回一个JSX表达式(如 <div>...</div>),该组件的返回类型就是 JSX.Element
  • 作为函数参数:当某个函数接受一个React元素作为参数时,可以将其类型声明为 JSX.Element。例如,一个负责渲染特定元素的高阶组件(HOC)可能有这样的签名:
    function withSomeEnhancement(WrappedComponent: React.ComponentType): (props: Props) => JSX.Element { ... }
    
  • 作为数组元素或对象属性:当需要存储或传递一系列React元素(如在数组中存储多个子组件,或在对象字面量中作为属性值)时,这些元素的类型应为 JSX.Element

ReactNode

定义
ReactNode 是一个更宽泛的类型,它包含了所有React认为合法的“节点”,不仅包括 JSX.Element,还包括以下几种类型:

  • 字符串(string
  • 数字(number
  • 布尔值(boolean
  • nullundefined
  • ReactFragment(由数组或<>...</>语法创建的多个并列子元素)
  • ReactPortal(用于将子元素插入到DOM的其他位置,如ReactDOM.createPortal()返回的类型)

使用场景

  • 作为组件的children属性:当一个组件允许接收任意类型的子元素(不仅仅是单一的React元素)时,其 children 属性类型通常被声明为 ReactNode
    这样可以接收字符串、数字、布尔值、空值、React元素数组、Fragments等。
  • 泛型约束:在需要处理可能包含多种React节点类型的集合或结构时,可以使用 ReactNode 作为泛型约束,确保这些结构只包含React认可的节点类型。

ReactElement

定义
ReactElement 是React组件树中的基础构建块,是一个JavaScript对象,表示一个具体的React组件实例及其相关的属性和子元素。它的结构通常如下:

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
  type: T;
  props: P;
  key?: Key | null;
}

其中:

  • type:表示组件类型,可以是字符串(HTML标签名)或一个React组件构造函数。
  • props:一个对象,包含传递给组件的所有属性和方法。
  • key:可选的,用于React内部的高效更新和排序。

使用场景

  • 低级别操作:直接操作React组件树(如在自定义的shouldComponentUpdateReact.Children.map等方法中)时,可能会遇到 ReactElement 对象。
  • 类型细化:在需要确保变量或参数具体为React组件实例(而非其他ReactNode类型)时,可以使用 ReactElement 类型。
    尽管在大多数情况下,JSX.Element 已足够,但在某些涉及更底层React API或高级类型技巧的场景中,可能需要明确使用 ReactElement

总结来说:

  • JSX.Element:用于表示由JSX编译出的单个React元素,常用于组件返回值、函数参数和数据结构。
  • ReactNode:涵盖所有React允许的节点类型,包括但不限于React元素、基本类型值、Fragments和Portals,常用于组件的children属性和需要处理多种节点类型的情况。
  • ReactElement:最底层的React组件实例表示,用于直接操作组件树或在需要精确类型控制时使用。
    在实际编码中,通常较少直接指定为 ReactElement 类型,更多使用 JSX.Element

为什么类组件的渲染方法返回 ReactNode,而函数组件返回 ReactElement?

事实上,他们确实返回了不同的东西。组件返回:
render(): ReactNode;

函数是“无状态组件”:

 interface StatelessComponent<P = {}> {
    (props: P & { children?: ReactNode }, context?: any): ReactElement | null;
    // ... doesn't matter
}

标签:ReactElement,ReactNode,Element,React,vs,组件,JSX
From: https://www.cnblogs.com/longmo666/p/18148930

相关文章

  • 【VMware vSphere】使用Managed Object Browser(MOB)浏览vSphere相关对象。
    ManagedObjectBrowser(MOB)是一个和vSphere(ESXi和vCenter)捆绑在一起的工具,可以直观的浏览或查询vSphere当中各种对象的信息,比如集群、主机以及虚拟机等。这些对象包含多个属性,我们可以通过这些属性了解相关对象的详细信息,比如对象的状态、配置以及结构等。同时,在不同的对象里,还可......
  • 招聘优秀 DevSecOps 工程师的实用面试关注点
    招聘优秀DevSecOps工程师的实用面试关注点编程经验    任何从事DevSecOps和AppSec的安全专业人员都必须了解代码。理想情况下,所有安全专业人员都应从程序员成长起来。你可能不同意我的观点,但DevSecOps和AppSec专家应该在某种程度上与代码打交道,无论是一些YAML清......
  • vs code--AI编码助手(GitHub Copilot)安装使用
    GitHubCopilot是现在最流行的编程代码助手,现在介绍一下vscode安装使用过程。vscode选择扩展点击,输入Copilot,显示GitHubCopilot和GitHubCopilotChat。现在是默认一起装,装其中一个另外一个都会自动安装。 安装好需要登录GitHub 点击跳到GitHub网页界面 需要输入Dev......
  • 【VSCode】远程开发配置密钥连接
    1、生成密钥对使用ssh-keygen工具生成密钥对。2、将公钥放到远程服务器将生成的id_ras.pub文件上传到服务器。放置路径可以自己选择,我一般放在~/.ssh中。将公钥中的文件取出放到authorized_keys中。catid_rsa.pub>authorized_keys3、配置ssh服务vim/etc/ssh/sshd_co......
  • VSCode非活跃预处理程序块Inactive颜色设置(底色字色透明度)
    VSCode非活跃预处理程序块——#if0非活跃预处理程序块#else活跃预处理程序块#endif#if1活跃预处理程序块#else非活跃预处理程序块#endif 效果 ......
  • Anaconda Navigator启动卡在loading applications界面(同时莫名启动了VSCODE)
    0.问题参考:anacondanavigator启动时一直卡在loadingapplications页面我的问题和网上普遍的不太一样,首先我能找到conda_api.py,但是不是在D:\anaconda\Lib\site-packages\anaconda_navigator\api文件夹下,而是在...\anaconda3\pkgs\anaconda-project-0.11.1-py311haa9553......
  • vsCode无法连接服务器问题解决及思考
    背景早上刚打开电脑,准备开始一天的工作。但是发现VSCode无法连接上我的虚拟机了,导致无法工作了,这让我十分头疼。最终花了将近一天的时间将问题解决,但是其中的过程走了不少弯路,浪费了不少时间,也进行了反思。我们作为开发人员,应该要用软件思维去理解这款产品,帮助我们去思考问题。......
  • 安装VMware vSphere vCenter 8.0
    安装VMwarevSpherevCenter8.01运行安装程序  2语言选择中文  3点下一步 4接受许可协议,点下一步 5填写部署vCenter服务的ESXI主机IP地址以及对应ESXI主机的账号密码,这里将vCenter服务部署在192.168.1.14这台主机上 6接受证书警告 7设置vCenter的主......
  • vscode使用PasteImage插入图片
    vscode使用PasteImage插入图片需求在vscode中写Markdown文件,经常需要插入图片,使用插件PasteImage进行简单配置后,就可以方便插入图片并自动存放到相应路径的文件夹中安装及配置安装从扩展商店搜索PasteImage并安装即可配置vscode设置中搜索PasteImage,找到PasteImage:......
  • vscode自定义log快捷生成代码
    1、进入设置页面:文件>首选项>用户代码片段>选择设置的语言。2、自定义打印:3、关于代码段显示位置的调整设置文件>首选项>设置,搜索代码段或snippetSuggestions,修改为”top”;4、页面中使用:输入log看效果 ......