ReactElement 源码笔记

ReactElement通过 createElement创建,调用该方法需要 传入三个参数:

  • type
  • config
  • children

type指代这个ReactElement 的类型

config指代这个ReactElement 的属性对象

children指代这个ReactElement 的子元素节点

  • 字符串比如 'div''p'代表原生DOM,称为HostComponent
  • Class 类型是我们继承自 Component 或者 PureComponent的组件,称为ClassComponent
  • 方法就是 function Component
  • 原生提供的 FragmentAsyncMode 等是 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的由来:

  1. 定义一个ClassComponent: class Comp extends React.Component
  2. 可以为 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源码笔记的更多相关文章

  1. Zepto源码笔记(一)

    最近在研究Zepto的源码,这是第一篇分析,欢迎大家继续关注,第一次写源码笔记,希望大家多指点指点,第一篇文章由于首次分析原因不会有太多干货,希望后面的文章能成为各位大大心目中的干货. Zepto是一 ...

  2. redis源码笔记(一) —— 从redis的启动到command的分发

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载联系作者并保留声明头部与原文链接https://luzeshu.com/blog/redis1 本博客同步在http://www.cnblog ...

  3. AsyncTask源码笔记

    AsyncTask源码笔记 AsyncTask在注释中建议只用来做短时间的异步操作,也就是只有几秒的操作:如果是长时间的操作,建议还是使用java.util.concurrent包中的工具类,例如Ex ...

  4. Java Arrays 源码 笔记

    Arrays.java是Java中用来操作数组的类.使用这个工具类可以减少平常很多的工作量.了解其实现,可以避免一些错误的用法. 它提供的操作包括: 排序 sort 查找 binarySearch() ...

  5. Tomcat8源码笔记(八)明白Tomcat怎么部署webapps下项目

    以前没想过这么个问题:Tomcat怎么处理webapps下项目,并且我访问浏览器ip: port/项目名/请求路径,以SSM为例,Tomcat怎么就能将请求找到项目呢,项目还是个文件夹类型的? Tom ...

  6. Tomcat8源码笔记(七)组件启动Server Service Engine Host启动

    一.Tomcat启动的入口 Tomcat初始化简单流程前面博客介绍了一遍,组件除了StandardHost都有博客,欢迎大家指文中错误.Tomcat启动类是Bootstrap,而启动容器启动入口位于 ...

  7. Tomcat8源码笔记(六)连接器Connector分析

    根据 Tomcat8源码笔记(五)组件Container分析 前文分析,StandardService的初始化重心由 StandardEngine转移到了Connector的初始化,本篇记录下Conn ...

  8. Tomcat8源码笔记(五)组件Container分析

    Tomcat8源码笔记(四)Server和Service初始化 介绍过Tomcat中Service的初始化 最先初始化就是Container,而Container初始化过程是咋样的? 说到Contai ...

  9. Tomcat8源码笔记(四)Server和Service初始化

    上一章 简单说明下Tomcat各个组件: Server:服务器,Tomcat服务器,一个Tomcat只有一个Server组件; Service:业务层,是Server下最大的子容器,一个Server可 ...

随机推荐

  1. 【noi 2.6_9270】&【poj 2440】DNA(DP)

    题意:问长度为L的所有01串中,有多少个不包含"101"和"111"的串. 解法:f[i][j]表示长度为i的01串中,结尾2位的十进制数是j的合法串的个数.那 ...

  2. Codeforces #637 div2 B. Nastya and Door

    题意:给你一个数组a,定义:若a[i]>a[i]&&a[i]>a[i-1],则a[i]为峰值,求长度为k的区间内峰值最多能为多少,并输出这个区间的左端点(区间需要将峰的左边 ...

  3. streamlink 安装使用

    CentOS 安装: pip install streamlink 使用: #查看视频信息 streamlink $URL #下载视频 streamlink $URL best streamlink ...

  4. leetcode 周赛 205 1576-5508-5509-5510

    第四题比较难,看题解用并查集做比较简单,但是我觉得难度在想到用并查集,可能是最近做题少所以想不到吧. 1 替换所有的问号 class Solution { public: string modifyS ...

  5. codeforce 849A

    A. Odds and Ends time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  6. Leetcode(9)-回文数

    判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121 输出: true 示例 2: 输入: -121 输出: false 解释: 从左向 ...

  7. tensorflow加载ckpt出错

    Issue链接 问题: tensorflow加载ckpt出错 此处原因: 该ckpt文件对应的tensorflow版本过老, 其中的部分内置变量名发生了改变. 提示: Key lstm_o/bidir ...

  8. webpack OSS All In One

    webpack OSS All In One 阿里云 OSS 对象存储(Object Storage Service,简称OSS),是阿里云对外提供的海量.安全和高可靠的云存储服务 https://c ...

  9. 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 ...

  10. free online code editor

    free online code editor online vscode https://stackblitz.com/ https://codesandbox.io/ https://codesh ...