学习笔记 —— React源码解析第一天

学习计划

学习网址：https://react.jokcy.me/ （笔记中内容均为转载）
每天自学一点计划持续学习主要通过看视频和看文章
今日计划：

• 完成React API的学习

每日笔记

React中的API
const React = {
Children: { //提供处理props.children的方法
map,
forEach,
count,
toArray,
only,
},

  createRef,				                   //新的ref用法
  Component,                            
  PureComponent,                     //两个类型基本相同，区别后者多了一个标识，判断你是否继承PureComponent，并且使用!shallowEqual(oldProps, newProps)进行判断，
                                      同时时react中对比ClassComponent是否更新，（1）shouldComponentUpdata (2)PureComponet判断

  createContext,				//新的context方案，新版本中有ProviderComp和ConsumerComp两种		
  forwardRef,				    //使用HOC高阶组件传递ref，在redux中在组件外包了一层，使用...props方法传入

  Fragment: REACT_FRAGMENT_TYPE,
  StrictMode: REACT_STRICT_MODE_TYPE,
  unstable_AsyncMode: REACT_ASYNC_MODE_TYPE,
  unstable_Profiler: REACT_PROFILER_TYPE,

  createElement: __DEV__ ? createElementWithValidation : createElement,
  cloneElement: __DEV__ ? cloneElementWithValidation : cloneElement,
  createFactory: __DEV__ ? createFactoryWithValidation : createFactory,
  isValidElement: isValidElement,

  version: ReactVersion,

  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals,
};

ReactElement

ReactElement通过createElement创建，参数： type, config, children

1.type:

• 指ReactElement类型，字符串列如div, p代表原生dom，成为HostComponet
• Class类型是我们继承自Component/PureComponet
• 方法就是 functionComponent
• 原生提供Fragment、Component等Symbol
• ToDo是否有其他的

2.config:
创建时通过config传入，但key和ref不会跟其他config中变量一起处理，最为大度变量

3.children

总结：ReactElement 是用来承载信息容器，告诉后续节点以下信息;

1. type类型，用于判断如何创建节点

2. key和ref这些特殊信息

3. props新的属性内容

4. $$typeof用于确实是否属于Reactelement

   export function createElement(type, config, children) {
   // 处理参数

   return ReactElement(
   type,
   key,
   ref,
   self,
   source,
   ReactCurrentOwner.current,
   props,
   );
   }

   const ReactElement = function(type, key, ref, self, source, owner, props) {
     const element = {
       // This tag allows us to uniquely identify this as a React Element
       //这个标记让我们认为是否是一个ReacElement
       $$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,
     };
   
     return element
   }