React 源码阅读入门1（JSX与Component）

最新推荐文章于 2023-05-14 21:52:56 发布
最新推荐文章于 2023-05-14 21:52:56 发布
阅读量346 收藏
点赞数
分类专栏： 前端 文章标签： react javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w19960808/article/details/104608824
版权
这篇博客介绍了React源码中的React.createElement与JSX，以及Component和PureComponent的区别。JSX本质是JavaScript，通过React.createElement转换成元素节点。在JSX中，key和ref属性有特殊处理，且不能作为props传递。Component提供了setState和forceUpdate方法，而PureComponent通过浅比较优化渲染性能。
摘要由CSDN通过智能技术生成

基本信息

React的github地址 可选择分支对应的版本进行克隆。此处使用当前的master分支既v16.12.0进行学习。

项目目录结构如下，最重要的react与react-dom源码，位于package文件夹下对应目录的src文件夹中。
在这里插入图片描述

react源码的目录结构
在这里插入图片描述

react/src/React.js

创建React对象，该对象包括我们平时开发中常用的react api，例如Component组件、hooks方法等。
在这里插入图片描述
注：react的源码有使用flow进行静态代码检查，类似ts，导致部分js文件编辑器会报错。这里我尝试下载flow相关的vscode插件后仍然提示类型错误，只好暂时将vscode的javascript.validate.enable配置项关闭。

React.createElement与JSX</

最低0.47元/天 解锁文章
onjuju
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【重识前端】React源码阅读（一）什么是jsx react 源码 解析
cuandeqin2083的博客
03-30 395
前言 一些废话和个人感悟，看干货的直接跳过…到jsx 重识前端断断续续也写了大半年了。里面基本上都是个人技术栈的积累，以及面试题的回答。感兴趣的伙伴可以点到我的主页去看。 说说今天的主角-React吧。React的源码之前一直想要去阅读学习的，也确确实实在看了，但是经常看着看着就发困。然后就开始偷懒，从一些周边的开始阅读，比如React-Router，React-Redux之类的。之前都是看完之后再开始写文章。现在想一边看一边写，换个方式看看。如果有写错的地方欢迎大家讨论，如果觉得还可以的话可以点个赞，谢谢
vue3 优雅的在 jsx 中使用动态组件 component
学Java的小前端的博客
12-28 7203
想必用 vue 撸过后台的同学们都有经历过，侧边导航栏结合 vue-router 的无限层级渲染。 但是 vue3 所推崇的按需引入加上 element-plus 的 icon 组件变化。 使得我们在渲染的时候需要用到动态组件。 内置组件 component 在 jsx 中没有办法正常渲染，有成功的同学可以留下代码讨论下。 resolveComponent 与 h 结合使用 成功渲染，代码如下： import { defineComponent, resolveComponent, h } from ".
Vue3 jsx 语法中使用 v-slots 插槽 和 component动态组件
最新发布
ZHANG_666
05-14 3247
vue3 jsx语法中使用 插槽v-slots 和动态组件component 的使用和实现
vue3 如何在 jsx中使用 component 组件
知秋
01-11 966
component组件不像其它的内置组件(tansition),可以直接从vue中直接导出，所有要在jsx使用component就要使用h函数。
代码简洁之道：编写干净的 React Components & JSX
程序员成长指北
04-14 203
不同团队编写出来的 React 代码也不尽相同，水平有个有高低，就像十个读者就有十种哈姆雷特，但是以下八点可能是你编写 React 代码的基本准则。一、 可选的 props 和空对象 {}...
react源码-简易的demo-通俗易懂
03-31
在React源码中，我们可以看到`ReactElement`和`ReactComponent`的概念。`ReactElement`是描述UI的轻量级对象，而`ReactComponent`是组件的实例，负责渲染和管理组件的生命周期方法。生命周期方法如`...
jsx编辑器：JSX Live编辑器
02-05
JSX Live编辑器是一款专为前端开发者设计的实时编辑工具，尤其针对React、Vue...通过学习和研究这个编辑器的源码，开发者可以深入了解如何在实际项目中结合使用JSX、React、Vue或Preact，以及如何优化前端开发工作流。
ReactComponent.js
06-10
ReactComponent通过JSX语法糖进行创建，如 `<MyComponent prop1="value1" />`，实际上会调用 `React.createElement(MyComponent, {prop1: "value1"})`。 接下来，我们来探讨ReactComponent的生命周期。React组件有...
reactnative-源码.rar
10-10
1. **组件化**：React Native的核心是组件化编程，每个UI元素都是一个可复用的组件，这使得代码更易于维护和重用。开发者可以通过组合简单的组件创建复杂的用户界面。 2. **JSX语法**：React Native 使用JSX...
React的核心概念—— Jsx、 Component、 Props、 Refs、 State
qq_43562926的博客
05-17 520
前端的3大主流框架：vue、angular、react React的核心思想：组件化 React的核心概念：组件/jsx/props/state/refs 一、React的概述 ui = user interface 用户界面 what? React是由facebook出品的，用来渲染ui的js库，指的是我们可以通过组件来构建ui（和vue、angular、ionic组件树），定位就是用来实现ui的。 why? ①数据操作太频繁 VDOM 虚拟DOM，尽量的降低操作DOM的成本 ②代码维护成本很高 单向.
React组件Component
ohyeahhhh的博客
01-23 6159
在React，组件（component），就是一个UI的单元。它的思想是，将要展示的内容，分成多个独立部分，每一个这样的部分，就是一个组件，就有点像android或者ios中的控件。组件的基本组成部分每个组件，其实在代码中提现出来就是一个类，一个最简单的组件：class Greeting extends React.Component { render() { return <h1>He
JSX语法详解
热门推荐
王浴昊
12-02 8万+
JSX语法详解 本文在官方文档的基础上，进行了扩展扩展补充和一些解读。基本涵盖了JSX语法的细枝末节，JSX语法本身并不复杂，也容易掌握。本文供学习参考使用。 一、基础1、JSX是什么JSX是一种像下面这样的语法：const element = <h1>Hello, world!</h1>;它是一种JavaScript语法扩展，在React中可以方便地用来描述UI。本质上，JSX为我们提
vue使用jsx写法如何实现动态组件功能？
Comvir的专栏
02-25 4043
vue的内置组件component不能在jsx中使用，本案例给出替代方案
React 之 JSX
L凯的博客
03-31 1203
什么是JSX ?    即JavaScript XML ，基于JavaScript 融合了XML,我们可以在js中书写XML， 是一种标记语言,可以自定义属性，具有可扩展性。在react中如果想向页面输出一个标签，必须用到react内置的JSX语法，否则输出的只是普通的字符串。使用注意    必须引用babel.js文件解析JSX, script标签中添加 type="text/babel" 属性...
React 学习笔记（一）：JSX
一个大神的发展史
04-19 272
总JSX：本质上来说，JSX只是React.createElement(component, prop, ...children) 方法的语法糖&lt;myHeader someData={data}&gt; Header Content &lt;/myHeader&gt;等价于：React.createElement( 'myHeader',        // Type {some...
5分钟入门react教程（提供源码）
weixin_46279293的博客
09-13 260
简单易懂的react 入门教程 React ：是一个用于构建用户界面的 JavaScript 库 JSX: React 中建议使用jsx语法，jsx最终会被转为普通 JavaScript 函数 TypeScript ：是JavaScript 的一个类型超集，TypeScript 可以在构建时发现 bug 和错误，这样程序运行时就可以避免此类错误，.ts 是默认的文件扩展名，而 .tsx 是一个用于包含 JSX 代码的特殊扩展名 Node.js 是一个基于 Chrome V8 引擎的 JavaScript
vuejs知乎_在 vue 中使用 jsx 与 class component 的各种姿势
weixin_39970166的博客
01-02 848
在之前我们分享过一次 一个使用 react 的思想去使用 vue 的方式。随着组内很多时候为了让 view 层更加清晰，和一些复杂的逻辑处理，导致现在 vue 代码中 jsx 的代码越来越多，这里进行一个整理说明 如何使用先参看腾讯 alloyTeam 这篇文章：用 jsx 写 vue 组件里面有提到使用 babel-plugin-transform-vue-jsx babel 6 插件来处理 j...
深入理解React：组件化、JSX与状态管理
1. React基础 - React JSX：JSX是JavaScript的一个语法扩展，它允许在JavaScript中书写类似HTML的结构，使得创建和组合UI元素变得简单直观。 - Virtual DOM：React使用虚拟DOM（Virtual DOM）来提高性能。当状态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值