ReactElement源码笔记
ReactElement
源码笔记
ReactElement
通过 createElement
创建,调用该方法需要 传入三个参数:
- type
- config
- children
type
指代这个ReactElement
的类型
config
指代这个ReactElement
的属性对象
children
指代这个ReactElement
的子元素节点
- 字符串比如
'div'
,'p'
代表原生DOM,称为HostComponent
- Class 类型是我们继承自
Component
或者PureComponent
的组件,称为ClassComponent
- 方法就是
function Component
- 原生提供的
Fragment
、AsyncMode
等是 Symbol,会被特殊处理 - TODO: 是否有其他的
//源码位置: packages/react/src/ReactElement.js
// createElement函数
export function createElement(type, config, children){
// 一、处理config
// 1. 判断config是否为空
// 2. 提取保留属性(key, ref, self, soure)
// 3. 其余属性添加到新的props对象中
for(propName in config){
if(
hasOwnProperty.call(config, propName)&&
!RESERVED_PROPS.hasOwnProperty(propName)
){
props[propName] = config[propName]
}
}
// 二、处理children => props.children
// (children可以超过一个),处理过后的children 被放入 props.children
const childrenLength = arguments.length - 2;
if (childrenLength === 1) {
props.children = children;
} else if (childrenLength > 1) {
const childArray = Array(childrenLength);
for (let i = 0; i < childrenLength; i++) {
childArray[i] = arguments[i + 2];
}
props.children = childArray;
}
// 三、处理type的 defaultProps
if(type && type.defaultProps) {
const defaultProps = type.defaultProps;
for (propName in defaultProps) {
if(props[propName] === undefined) {
props[propName] = defaultProps[propName]
}
}
}
// 四、返回一个ReactElement()函数
return ReactElement(
type,
key,
ref,
self,
source,
ReactCurrentOwner.current,
props,
);
}
注:
type.defaultProps
的由来:
- 定义一个ClassComponent:
class Comp extends React.Component
- 可以为
Comp
设置一个defaultProps
:Comp.defaultProps = { value: 1 }
//源码位置: packages/react/src/ReactElement.js
// ReactElement 函数
const ReactElement = function(type, key, ref, self, source, owner, props){
const element = {
// $$typeof用于标识 Element 是什么类型的
$$typeof: REACT_ELEMENT_TYPE,
// Built-in properties that belong on the element
type: type,
key: key,
ref: ref,
props: props,
// Record the component responsible for creating this element.
_owner: owner,
}
// _DEV_ 代码...
return element;
}
ReactElement源码笔记的更多相关文章
- Zepto源码笔记(一)
最近在研究Zepto的源码,这是第一篇分析,欢迎大家继续关注,第一次写源码笔记,希望大家多指点指点,第一篇文章由于首次分析原因不会有太多干货,希望后面的文章能成为各位大大心目中的干货. Zepto是一 ...
- redis源码笔记(一) —— 从redis的启动到command的分发
本作品采用知识共享署名 4.0 国际许可协议进行许可.转载联系作者并保留声明头部与原文链接https://luzeshu.com/blog/redis1 本博客同步在http://www.cnblog ...
- AsyncTask源码笔记
AsyncTask源码笔记 AsyncTask在注释中建议只用来做短时间的异步操作,也就是只有几秒的操作:如果是长时间的操作,建议还是使用java.util.concurrent包中的工具类,例如Ex ...
- Java Arrays 源码 笔记
Arrays.java是Java中用来操作数组的类.使用这个工具类可以减少平常很多的工作量.了解其实现,可以避免一些错误的用法. 它提供的操作包括: 排序 sort 查找 binarySearch() ...
- Tomcat8源码笔记(八)明白Tomcat怎么部署webapps下项目
以前没想过这么个问题:Tomcat怎么处理webapps下项目,并且我访问浏览器ip: port/项目名/请求路径,以SSM为例,Tomcat怎么就能将请求找到项目呢,项目还是个文件夹类型的? Tom ...
- Tomcat8源码笔记(七)组件启动Server Service Engine Host启动
一.Tomcat启动的入口 Tomcat初始化简单流程前面博客介绍了一遍,组件除了StandardHost都有博客,欢迎大家指文中错误.Tomcat启动类是Bootstrap,而启动容器启动入口位于 ...
- Tomcat8源码笔记(六)连接器Connector分析
根据 Tomcat8源码笔记(五)组件Container分析 前文分析,StandardService的初始化重心由 StandardEngine转移到了Connector的初始化,本篇记录下Conn ...
- Tomcat8源码笔记(五)组件Container分析
Tomcat8源码笔记(四)Server和Service初始化 介绍过Tomcat中Service的初始化 最先初始化就是Container,而Container初始化过程是咋样的? 说到Contai ...
- Tomcat8源码笔记(四)Server和Service初始化
上一章 简单说明下Tomcat各个组件: Server:服务器,Tomcat服务器,一个Tomcat只有一个Server组件; Service:业务层,是Server下最大的子容器,一个Server可 ...
随机推荐
- 【noi 2.6_9270】&【poj 2440】DNA(DP)
题意:问长度为L的所有01串中,有多少个不包含"101"和"111"的串. 解法:f[i][j]表示长度为i的01串中,结尾2位的十进制数是j的合法串的个数.那 ...
- Codeforces #637 div2 B. Nastya and Door
题意:给你一个数组a,定义:若a[i]>a[i]&&a[i]>a[i-1],则a[i]为峰值,求长度为k的区间内峰值最多能为多少,并输出这个区间的左端点(区间需要将峰的左边 ...
- streamlink 安装使用
CentOS 安装: pip install streamlink 使用: #查看视频信息 streamlink $URL #下载视频 streamlink $URL best streamlink ...
- leetcode 周赛 205 1576-5508-5509-5510
第四题比较难,看题解用并查集做比较简单,但是我觉得难度在想到用并查集,可能是最近做题少所以想不到吧. 1 替换所有的问号 class Solution { public: string modifyS ...
- codeforce 849A
A. Odds and Ends time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- Leetcode(9)-回文数
判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121 输出: true 示例 2: 输入: -121 输出: false 解释: 从左向 ...
- tensorflow加载ckpt出错
Issue链接 问题: tensorflow加载ckpt出错 此处原因: 该ckpt文件对应的tensorflow版本过老, 其中的部分内置变量名发生了改变. 提示: Key lstm_o/bidir ...
- webpack OSS All In One
webpack OSS All In One 阿里云 OSS 对象存储(Object Storage Service,简称OSS),是阿里云对外提供的海量.安全和高可靠的云存储服务 https://c ...
- Versatile Python 3.x
Versatile Python 3.x TryPython Python 3.8.0 (default, Nov 14 2019, 22:29:45) [GCC 5.4.0 20160609] on ...
- free online code editor
free online code editor online vscode https://stackblitz.com/ https://codesandbox.io/ https://codesh ...