js createelement_通过源码学习React.createElement

最新推荐文章于 2021-05-26 10:33:06 发布
最新推荐文章于 2021-05-26 10:33:06 发布
阅读量65 收藏
点赞数
文章标签： js createelement

6eef181b66ccdc209515225fc2d189f3.png

概述

本文主要学习React.createElement()API的应用。在学习之前，我们需要知道React的几个基础核心概念，React Element，React Component，React Instance不熟悉的童鞋推荐阅读下文。

React Components, Elements, and Instances。

Babel与JSX

我们都知道JSX是React中的一种标签语法，它是一个语法糖，主要用来取代React.createElement()产生React Element。但是浏览器呢不支持JSX，因此我们需要一个工具Babel来进行翻译。因此Babel就是把JSX转为浏览器相兼容的格式。

1a6cb457ed76d14035efd7295d0534cb.png

我们可以去Babel官网提供的环境写几个DEMO看看它是怎么转换的。

39290d0e33c5e68dee7d26db37a8b328.png

e1da85f433046be8c89309879b5a4476.png

083adc5f59b3ace293bf7beb51243777.png

React.createElement

源码位置在createelement。

// ReactSymbols.js

demo

我们将下面代码在React中执行看看打印出来的React Element是什么样子。

function

c29c4f45fd700813ea8e3a571e7d59d9.png

我们可以对比下真正打出的React Element。

b562d726d60d2286871689b3ff9c8c6b.png

现在对React.createElemt有一个粗浅的认识，至于如何将其转为为真正的DOM往后看。

源码目录见

https://github.com/NuoHui/react-source-code​github.com
weixin_39996096
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React源码分析1-jsx转换及React.createElement
It_kc的博客
10-19 195
本章讲述了 jsx 在 react17 之前和之后的不同的转换，实际上 react17 之后 babel 的对 jsx 的转换就是比之前多了一步的动作：另外讲述了和的内部实现是怎样的。通过 babel及，将 jsx 转换为了浏览器能够识别的原生 js 语法，为 react 后续对状态改变、事件响应以及页面更新等奠定了基础。后面的章节中，将探究 react 是如何一步步将状态等信息渲染为真实页面的。
React源码之React.createElement
玉案轩窗的博客
04-04 1万+
前言 React特点的之一就是JSX，JSX是JavaScript的语法的扩展，使用JSX来开发UI内容。React开发不一定需要使用JSX，但是使用JSX会非常便捷。 实际上JSX是React.createElement函数的语法糖，使用JSX需要使用Babel来将JSX转移成createElement函数调用。 createElement具体执行逻辑 JSX的具体使用可以查看React中文官网文档对其的介绍，这里就不赘述了。使用React JSX方式来创建的简单的实例如下： ReactDOM.rende
vuejs源码之createElement
weixin_43213137的博客
05-26 745
vue使用createElement函数创建vnode 上文中我们提到了vue使用虚拟dom来描述dom节点，这样做的目的是较少浏览器的开销，提高性能。那么vue是如何创建虚拟dom的呢？下面我们来分析vue中的createElement函数是如何创建vnode的。 ...
React.createElement方法使用详解
lixingshi的专栏
12-24 1万+
大家看到createElement方法，自然就想到了document.createElement()了。没错，这两个方法的名字是一样的。但是，这里我们要介绍的是React.createElement()而不是document.createElement()。 下面我们直接进入正题 React.createElement 首先我们看官方给出的解释 ReactElement createEle
leslie1943#blog#React-JSX和React.createElement1
07-25
React.createElement的语法糖JSX 语法是如何在 JavaScript 中生效的JSX 会被编译为 React.createElement()
phone-rep_React.js
05-02
"phone-rep_React.js"项目为我们提供了一个学习和实践React.js的实例，通过这个项目，我们可以深入了解React的组件化开发、状态管理、生命周期方法以及JSX的使用。在不断发展的前端领域，掌握React.js及其相关技术，...
react开发相关js资源包大全，基本都有，免费下载
12-31
这个压缩包文件包含了React开发中常用的一些JavaScript资源包，包括`propTypes.js`和`react.js`，这些都是React开发的核心组成部分。 首先，我们来详细了解下`propTypes`。`propTypes`是React的一个可选模块，它...
React学习手册.zip
07-17
React是当前前端开发领域中的主流框架...通过阅读《React学习手册.pdf》，你将全面掌握React的基础知识，理解其工作原理，并能应用到实际项目中，提升你的前端开发技能。不断探索和实践，你将在React的世界里游刃有余。
探索Vue.js底层源码——createElement是如何创建Vnode的？
五柳
10-27 1544
前言     在Vue的渲染过程中都会先将代码中的标签转化成render函数，然后通过render函数中的creatElement来创建Vnode。那么，在Vue中createElement又是怎么定义的？ createElement()方法     在Vue.js开发中可以利用createElement方法创建VNo...
虚拟DOM了解、创建及 JSX底层处理机制
DOM曼珠沙华的博客
03-07 1101
下图是浏览器的渲染图，下面会介绍虚拟DOM 可以看到这里，浏览器渲染需要三个引擎，HTML引擎、CSS引擎、JS引擎，页面渲染直接和html、css相关，生成一个DOM树和css规则树，最后合成一个渲染树，最后根据渲染树布局和绘制的操作，成本最高的布局，其次会绘制，绘制无法避免，但是我们可以减少绘制的次数，如果是jquery的话，每循环一次，整个页面就会刷新，效率很低。 虚拟DOM是为了避免渲染（布局和绘制）的次数，发明了diff算法，这里将原生的DOM用JS来表示，在操作的时候有一个对比方..
React.createElement的理解使用
热门推荐
小白变怪兽
05-10 7万+
React.createElement()： 根据指定的第一个参数创建一个React元素。 React.createElement( type, [props], [...children] ) 第一个参数是必填，传入的是似HTML标签名称，eg: ul, li 第二个参数是选填，表示的是属性，eg: className 第三个参数是选填, 子节点，eg: 要显示的文本...
React 学习笔记 7 （React.createElement简单实现）
车联网开发的博客
04-27 637
1.什么是React元素 是React应用的最小单位，它描述了你在屏幕上看到的内容，React元素的本质是一个普通的JS对象，ReactDOM会保证浏览器中的DOM和你的React元素一致。 2.使用babel转化生产元素的背后故事 function createElement(type,config={},...children){ return { type, props: {...config,children} } } ...
原生JS模拟实现React.createElement()
weixin_43821550的博客
08-24 679
1、JSX语法渲染流程：使用jsx语法 => 调用React.createElement()函数 => 返回vNode(虚拟节点) => 渲染到页面上 2、React.createElment(type|标签名,props|属性的对象集合,children..|各种节点) const React = { createElement(type, props, ...c...
pi_heif-0.17.0-cp310-cp310-manylinux_2_17_aarch64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
Numper基础（一）
07-27
Numper基础（一）
C语言写的潮流计算大作业代码.zip
最新发布
07-27
c写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zipc写的潮流计算大作业代码.zip
关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型.docx
07-27
大模型（Large Models），尤其是指预训练的大规模语言模型，在自然语言处理（NLP）、计算机视觉（CV）等领域取得了显著的进步。以下是一些关于大模型的教程、调用和使用技巧的资源，帮助更多人高效地认知和使用大模型： 1. 大模型教程资源 官方文档： 大多数大型模型都会在其官方网站或GitHub页面上发布详细的文档，包括模型介绍、安装指南、使用示例等。 例如，Hugging Face的Transformers库提供了丰富的文档和教程。 在线课程： Coursera、edX等在线教育平台上提供了关于大模型的课程。 例如，斯坦福大学的NLP课程通常会涵盖最新的大模型技术。 博客文章： Medium、Towards Data Science等平台上有很多关于大模型的文章，这些文章通常由专业人士撰写，包含实战经验和技巧。 视频教程： B站（bilibili.com）和YouTube上有很多关于大模型的教程视频，适合初学者入门。 2. 调用API和使用技巧 Hugging Face Transformers： 提供了多种预训练模型的加载和调用方式。 Hugging Face文档 是一个非常
pi_heif-0.17.0-cp39-cp39-macosx_14_0_arm64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
React.createElement源码
04-07
React.createElement是React的核心API之一，它用于创建虚拟DOM元素。以下是React.createElement的源代码实现： ```javascript function createElement(type, props, ...children) { return { type: type, props:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值