实现 React 类组件渲染

基于文章 实现 React Fragment 节点渲染

本文将介绍如何渲染类组件。

类组件已不推荐使用,本文不会讲太多。

js 复制代码
class ClassComponent extends Component {
    render() {
        return (
            <div>
                <h3>ClassComponent</h3>
            </div>
        )
    }
}

初始化 Component

js 复制代码
export function Component(props: any) {
    this.props = props;
}

// 区分类组件和函数组件
Component.prototype.isReactComponent = {}

Render 阶段

BeginWork 阶段

beginWork 函数增加类组件的 case。

js 复制代码
function updateClassComponent(current: Fiber | null, workInProgress: Fiber) {
  const { type, pendingProps } = workInProgress;
  const instance = new type(pendingProps);
  const children = instance.render();
  reconcileChildren(current, workInProgress, children);
  return workInProgress.child;
}

// 1. 处理当前 fiber,因为不同组件对应的 fiber 处理方式不同,
// 2. 返回子节点 child
export function beginWork(
  current: Fiber | null,
  workInProgress: Fiber
): Fiber | null {
  switch (workInProgress.tag) {
    // 根节点
    case HostRoot:
      return updateHostRoot(current, workInProgress);
    // 原生标签,div、span...
    case HostComponent:
      return updateHostComponent(current, workInProgress);
    // 文本节点
    case HostText:
      return updateHostText(current, workInProgress);
    // Fragment
    case Fragment:
      return updateHostFragment(current, workInProgress);
    case ClassComponent:
      return updateClassComponent(current, workInProgress);
  }
  throw new Error(
    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
      "React. Please file an issue."
  );
}

createFiberFromTypeAndProps 函数,增加类组件的 case。

js 复制代码
// 根据 TypeAndProps 创建fiber
export function createFiberFromTypeAndProps(
  type: any,
  key: null | string,
  pendingProps: any
) {
  let fiberTag: WorkTag = IndeterminateComponent;

  if (isFn(type)) {
    // 函数组件
    if (type.prototype.isReactComponent) {
      fiberTag = ClassComponent;
    }
  } else if (isStr(type)) {
    // 原生标签
    fiberTag = HostComponent;
  } else if (type === REACT_FRAGMENT_TYPE) {
    fiberTag = Fragment;
  }
  const fiber = createFiber(fiberTag, pendingProps, key);
  fiber.elementType = type;
  fiber.type = type;
  return fiber;
}

Complete 阶段

completeWork 函数增加类组件的 case。

js 复制代码
function completeWork(
  current: Fiber | null,
  workInProgress: Fiber
): Fiber | null {
  const newProps = workInProgress.pendingProps;
  switch (workInProgress.tag) {
    case Fragment:
    case HostRoot:
    case ClassComponent:{
      return null;
    }
    case HostComponent: {
      // 原生标签,type 是标签名
      const { type } = workInProgress;
        // 1. 创建真实 DOM
        const instance = document.createElement(type);
        // 2. 初始化 DOM 属性
        finalizeInitialChildren(instance, newProps);
        // 3. 把子 dom 挂载到父 dom 上
        appendAllChildren(instance, workInProgress);
        workInProgress.stateNode = instance;
      return null;
    }
    case HostText: {
      workInProgress.stateNode = document.createTextNode(newProps);
      return null;
    }
  }

  throw new Error(
    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
      "React. Please file an issue."
  );
}
相关推荐
光影少年10 分钟前
前端线上出现白屏如何排查问题所在,利用第三方的工具都有哪些
前端·学习·web安全·前端框架
濑户川13 分钟前
Vue3 计算属性与监听器:computed、watch、watchEffect 用法解析
前端·javascript·vue.js
_Sem23 分钟前
KMP实战:从单端到跨平台的完整迁移指南
android·前端·app
Carry34525 分钟前
React 与 Vue 开发差异——CSS 样式
前端
前端九哥28 分钟前
我删光了项目里的 try-catch,老板:6
前端·vue.js
2301_7644413328 分钟前
身份证校验工具
前端·python·1024程序员节
4Forsee1 小时前
【Android】View 事件分发机制与源码解析
android·java·前端
一 乐1 小时前
车辆管理|校园车辆信息|基于SprinBoot+vue的校园车辆管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·车辆管理
百锦再1 小时前
Python、Java与Go:AI大模型时代的语言抉择
java·前端·vue.js·人工智能·python·go·1024程序员节
IT_陈寒2 小时前
Vite 3.0终极提速指南:5个鲜为人知的配置技巧让构建效率翻倍
前端·人工智能·后端