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的由来：

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; }