欢迎光临
我的个人博客网站

ReactElement源码笔记


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; } 
赞(0) 打赏
未经允许不得转载:张拓的天空 » ReactElement源码笔记
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏