React源码分析2 — 组件和对象的创建（createClass，createElement）

最新推荐文章于 2024-08-05 11:53:50 发布
最新推荐文章于 2024-08-05 11:53:50 发布
阅读量1.1w 收藏 6
点赞数 6
分类专栏： 移动开发：前端、后端、Android 文章标签： React 源码 class element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013510838/article/details/55669769
版权
本文深入探讨React组件的创建过程，包括使用createClass和ES6 class的底层实现，以及createElement函数的工作原理。文章详细分析了React组件对象初始化的四个阶段，涉及ReactDOMEmptyComponent、ReactDOMComponent、ReactCompositeComponent和ReactDOMTextComponent的创建细节。
摘要由CSDN通过智能技术生成

1 组件的创建

React受大家欢迎的一个重要原因就是可以自定义组件。这样的一方面可以复用开发好的组件，实现一处开发，处处调用，另外也能使用别人开发好的组件，提高封装性。另一方面使得代码结构很清晰，组件间耦合减少，方便维护。ES5创建组件时，调用React.createClass()即可. ES6中使用class myComponent extends React.Component, 其实内部还是调用createClass创建组件。

组件创建我们可以简单类比为Java中ClassLoader加载class。下面来分析下createClass的源码，我们省去了开发阶段错误提示的相关代码，如propType的检查。（if (“development” !== ‘production’) {}代码段都不进行分析了，这些只在开发调试阶段调用）

createClass: function (spec) {
   
    var Constructor = <
了解本专栏 订阅专栏 解锁全文 超级会员免费看
谢杨易
关注
专栏目录
订阅专栏
React源码分析1 -- 框架
谢杨易的博客
02-18 2万+
1 源码结构我们分析的React源码version为16.0.0-alpha.3，源码目录如下图所示。含义如下 addons：插件，一些比较有用的工具，如transition动画 isomorphic: 同构，服务端在页面初次加载时，将所有方法渲染好，一次性交给客户端。这样可以减少Ajax shared: 共用方法，一些utils test: 测试方法 renderers: React代码核心，大部...
通过实现 createElement、Component 和 render 深入理解React 原理
yuan_me_da的博客
03-19 761
文章目录createElementrender(vdom, container)Component 文章主要是通过官网和源码学习之后，对 React 核心 API 加入了自己的理解和总结。完整代码请参考 ,注意代码中将react 版本锁定在17.0.0 之前。 createElement 简单粗暴，我们先来看下面这段代码： import React from 'react' import ReactDOM from 'react-dom' function HelloMessage(props) {
ReactComponent源码
schifred的博客
02-11 345
ReactComponent模块，作为父类，创建基本的组件，内部实现setState、forceUpdate方法，用于更新state属性，重绘组件。   'use strict'; var _prodInvariant = require('./reactProdInvariant');// 生产环境React形式带url报错 // 组件尚未获得参数updater，即"reac...
createElement 和 cloneElement 的区别
最新发布
My_wife_QBL的博客
08-05 2306
是 React 提供的一个函数，用于创建一个 React 元素。type：要创建的元素的类型，可以是字符串（如'div''span'）或 React 组件（如props：一个对象，包含要传递给组件的属性（props）。children：可选，子元素，可以是一个或多个 React 元素，字符串或数字。是一个用于克隆和修改现有 React 元素的方法。element：要克隆的 React 元素。props：一个对象，用于合并到克隆的元素的现有 props 中。children。
17.React 如何定义对象及常见操作方法
Tiger的专栏
05-08 1万+
目录 1.对象概述 2.对象和属性 3.枚举一个对象的所有属性 4.创建新对象 4.1使用对象初始化器 4.2使用构造函数 4.3使用 Object.create 方法 4.4继承 4.5对象属性引用 4.5.1为对象类型定义属性 JavaScript的设计是一个简单的基于对象的范式。一个对象就是一系列属性的集合，一个属性包含一个名和一个值。一个属性的值可以是...
react 调用组件方法_React源码分析1 — 组件和对象的创建（createClass，createElement）...
weixin_39610353的博客
11-20 303
1 组件的创建学习了半年前端了，感觉前端的水确实也很深。做安卓的时候就对React-Native比较感兴趣，开发H5时也使用了一段时间的ReactJS。所以决定好好分析下它的源码。文章中有不对的地方，请大神不吝赐教。React受大家欢迎的一个重要原因就是可以自定义组件。这样的一方面可以复用开发好的组件，实现一处开发，处处调用，另外也能使用别人开发好的组件，提高封装性。另一方面使得代码结构很清晰，组...
React源码解析(三)：react-component
weixin_33709590的博客
04-04 496
在我们平时写一个类组件的时候，一般都会继承一个React.Component这个基类，我们可能会觉得，这个baseClass可能封装各种各样的功能(钩子函数等等)，它帮助我们运行render函数，然后最终不是我们写在里面的dom标签、子组件之类的把它们都渲染到浏览器里的这种形式。但实际是这样的吗？答案是否定的。在react当中不止有Component这一个baseClass, 它还有一个PureC...
React 组件渲染和更新的实现代码示例
10-17
1. **创建组件实例：** 当调用 `React.createElement` 方法或者 JSX 时，React 会创建组件的实例。如果组件是用 ES5 的方式编写的，可能会用 `React.createClass` 方法。 2. **初始化状态和属性：** 组件实例创建后...
React源码解析----createElement + Component + PureComponent
qq_38606793的博客
09-27 474
title: React源码解析----createElement + Component + PureComponent tags: - 源码 - React 上一篇介绍了React的Api，今天介绍createElement和React的Component相关操作。看了很多其他人的博客，对于React16的fiber架构还是无法了解，尽管我知道他很牛逼。发现了解React的源码还是需要从渲...
react组件以及组件的数据挂载方式
yanwu9537的博客
06-17 1971
元素与组件 如果代码多了之后，不可能一直在render方法里写，所以就需要把里面的代码提出来，定义一个变量，像这样： import React from 'react' import ReactDOM from 'react-dom' // 这里感觉又不习惯了？这是在用JSX定义一下react元素 const app = '<h1>欢迎进入React的世界</h1>' Re...
深入React源码揭开渲染更新流程的面纱
It_kc的博客
10-04 546
render会调用方法中，如果是第一次渲染，会先初始化FiberRoot，其为应用的起点。同时生成根节点的Fiber实例。这里=Fiber;=FiberRoot。调用会计算出此次更新的过期时间。并生成任务对象update，将其插入Fiber中的更新队列，然后调用触发任务调度会更新以该Fiber节点为根节点的整棵Fiber树的过期时间。然后调用进行调度中会绑定任务与具体执行函数。然后交由Scheduler处理。
react中createFactory, createClass, createElement分别在什么场景下使用，为什么要这么定义？...
weixin_34408624的博客
12-08 133
作者：元彦链接：https://www.zhihu.com/question/27602269/answer/40168594来源：知乎著作权归作者所有，转载请联系作者获得授权。 三者用途稍有不同，按依赖关系调整下顺序：1. createClass，如其名就是创建React组件对应的类，描述你将要创建组件的各种行为，其中只有当组件被渲染时需要输出的内容的render接口是必须实现的，其他都是可选...
react基础之React.createElement，调用写好的组件
weixin_43925630的博客
08-18 529
React.createElement
在60秒内创建一个React类
代码教主
06-10 78
React是Facebook构建和维护JavaScript库，旨在使您可以轻松地使用JavaScript构建用户界面。 在本视频中，我们将快速了解如何开始使用React。 作为一个库，我们将学到更多关于React的知识，并且我们将看到如何在我们的项目中开始实现它。 如视频中所述： React是用于构建用户界面JavaScript框架。 与其他前端JavaScript框架不同，它没有...
React 组件基础、创建组件、事件绑定、事件对象、有状态组件和无状态组件、state\setState、解决事件函数绑定不到this
七七的博客
11-04 445
bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。Focus Events 焦点事件 （这些焦点事件在 React DOM 上的所有元素都有效，不只是表单元素）Clipboard Events 剪切板事件。Transition Events 过渡事件。Keyboard Events 键盘事件。Form Events 表单事件。UI Events UI 事件。
React底层 render, createElement 方法作用梳理
bangbDIV的博客
05-06 808
react核心方法有ReactDom.render, React.createElement, setState三种方法。webpack+babel 会将 jsx 转换成 React.createElement(type, props, ...children)。正常写组件被babel转换之后, React.createElement(type, props, ...children)
React创建类时关于this的疑惑
Cappuccino0001的博客
12-08 435
在创建React类时，代码已附，触发click事件，报错，“Cannot read property 'setState' of undefined”，通过在控制台打印this，发现changeUserInfo()里的this为undefined，此时比较疑惑，解决的办法当然是给这个onClick事件改写为onClick={this.changeUserInfo.bind(this)}，但是为什么...
react实现div隐藏_前端战五渣学React——JSX & React.createElement()源码
weixin_33967069的博客
12-28 350
最近《一拳超人》动画更新第二季了，感觉打斗场面没有第一季那么烧钱了，但是剧情还挺好看的，就找了漫画来看。琦玉老师真的厉害！！！打谁都一拳，就喜欢看老师一拳把那些上来就吹牛逼的反派打的稀烂，专治各种不服！！！招聘AD阿里巴巴集团核心前端岗位薪资25到50一年一般至少16个月工资有意者微信联系：Dell-JS正文三大民工框架说到现在的前端，各种招聘JD上都会写“对主流框架（React/Vue/Ang...
React源码分析4 — React生命周期详解
热门推荐
谢杨易的博客
02-27 1万+
1 React生命周期流程调用流程可以参看上图。分为实例化，存在期和销毁三个不同阶段。介绍生命周期流程的文章很多，相信大部分同学也有所了解，我们就不详细分析了。很多同学肯定有疑问，这些方法在React内部是在哪些方法中被调用的呢，他们触发的时机又是什么时候呢。下面我们来详细分析。2 实例化生命周期getDefaultProps在React.creatClass()初始化组件类时，会调用getDefa
React组件创建全解析：createClass、ES6继承与JSX方式
本文将深入探讨在React中创建组件的不同方法，包括`createClass`、ES6中的继承方式以及不依赖继承的jsx直接返回组件的方式。对于初学者来说，理解这些创建组件的技巧至关重要。 1. `createClass`: 这是React早期...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

谢杨易

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值