react源码解析 1 基础

本文是看视频后进行的技术总结笔记，原视频技术总结文档直接点击 React源码解析文档参考- https://react.jokcy.me/

react16

• react16的更新彻底重写核心代码，升级不用调兼容
• 引入fiber，从根本上解决js单线程运行若是计算量太大致使的动画卡帧和交互卡顿的问题

内容设计

1. react简单api
2. react更新建立 update
3. fiber Scheduler 调度器
4. 各类不一样的组件如何更新
5. 完成各个节点更新的操做
6. 提交更新
7. context、ref、hydrate、事件体系的实现
8. Suspense
9. hooks

React 原理最核心部分

• 更新机制
• 什么是 Fiber 以及做用
• React 实现路更新任务的调度 和如何实现的

React 的调度过程

React 渲染更新的过程

基础

React Api

下面是 react暴露出来的api
React 顶层 API 官方文档连接

const React = {
    Children: {
        map,
        forEach,
        toarray,
        only,
    },
    
    createRef,
    Component,
    PureComponent,
    
    createContext,
    forwardRef,
    
    
    Fragment: REACT_FREGMENT_TYPE,
    StrictMode: REACT_STRICT_TYPE,
    unstable_AsyncMode: REACT_ASYNC_MODE_TYPE,
    unstable_Profiler: REACT_PROFILER_TYPE,
    
    createElemnt: _DEV_ ? createElmentWithValidation : createElment,
    cloneElemnt:  _DEV_ ? cloneElmentWithValidation : cloneElment,
    createFactory:  _DEV_ ? createFactoryWithValidation : createFactory,
    isValidElemnt:  isValidElemnt,
    
    version: ReactVersion,
    
    __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals,
}
复制代码

ReactElement

ReactElement 经过 createElement建立 调用该方法须要传入的三个参数：

• type
• config
• children

type是指 reactELement的类型

• 字符串 好比 div p 表明原生DOM，称为 HostComponent
• 继承自Component或者PureComponent 被称为ClassComponent
• function Componennt
• 原生提供的Fragment，AsyncMode等Symbol，会被特殊处理
• TODO：是否有其余类型

点击 打开下文代码片断在线编译

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 indentify this as React elemnt
    $$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 crateing elment
    _owner: owner
  };

  return element;
};

复制代码

React Children

点击 打开下文代码片断在线编译

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class IgnoreFirstChild extends React.Component {
  render() {
    const children = this.props.children
    return (
      <div> <div>IgnoreFirstChild 组件</div> {React.Children.map(children, (child, i) => { // Ignore the first child if (i < 1) return return child })} </div>
    )
  }
}

ReactDOM.render(
  <div> <IgnoreFirstChild > <div>first child</div> <div>second child</div> <div>third child</div> </IgnoreFirstChild > </div>, document.getElementById('container'), ); 复制代码

效果图: