likes
comments
collection
share

简单手写实现react的类组件

作者站长头像
站长
· 阅读数 16

继续学习写源码系列，本系列是学习系列。

  1. 简单手写实现 React 的 createElement 和 render，里面有准备工作，不再赘述。
  2. 简单手写实现 react 的函数组件

本文的目标是，手写实现类组件。

TL;DR

  • 增加 Component 类，且加上静态标识属性和实例的 props 属性
  • createDOM中增加处理类的情况，执行实例的 render 函数后，然后挂载返回值

科普

什么是类组件？

类组件的模样：

class ClassComponent extends React.Component {
  render() {
    return (
      <h1 className="title" style={{ color: '#f69' }}>
        {this.props.name}
      </h1>
    );
  }
}

类组件的特征：

  • 类组件：一个类，含有 render 函数，且返回react元素
  • props 使用的话，别忘了是 this.props

准备工作

先将index.js加入类组件

// import React from './source/react';
// import ReactDOM from './source/react-dom';
import React from 'react';
import ReactDOM from 'react-dom';

class ClassComponent extends React.Component {
  render() {
    return (
      <h1 className="title" style={{ color: '#f69' }}>
        {this.props.name}
      </h1>
    );
  }
}

const reactElement = <ClassComponent name="颜酱" />;
// {type:class...,props:{name:'颜酱'}}
console.log(reactElement);
ReactDOM.render(reactElement, document.getElementById('root'));

页面肯定可以渲染

分析类组件的渲染

  1. 借助babel，我们知道<ClassComponent name="颜酱"/>相当于React.createElement(ClassComponent,{ name:'颜酱' })
  2. 看下createElement处理函数组件时候的返回值，{type: class ClassComponent..., props:{name:'颜酱'}}
  3. render的时候，相当于render({type: class ClassComponent..., props:{name:'颜酱'}},...)，其实能推测，render 内部，新建类的实例，执行实例的render函数，然后将函数的返回值，挂载到容器上
  4. class的时候extends的是React.Component，所以React需要加上Component类
  5. 类组件和函数组件，type 都是函数类型，为了加以区分，在类上可以加个静态标识属性
  6. props 使用的时候是this.props，所以需要初始化

所以函数组件的渲染，本质就是 建立Component类 和 render对于类的处理。

实现类组件

1. 修改 createElement

同函数组件，babel 转译的时候，给我们处理好了，所以返回值也不用修改。

2. react 增加 Component 类

Component 类就做两个事

  • 设置静态属性标识是类组件
  • props 属性增加到实例上面，以便this访问
class Component {
  static isClassComponent = true;
  constructor(props) {
    this.props = props;
  }
}

const React = {
  createElement,
  Component,
};

3. 修改 render

其实也容易，在createDOM中处理类就好。这边是建立实例，然后执行实例的 render 函数，这个函数返回值同函数组件的返回值。

function createDOM(vdom) {
  const isTextNode = typeof vdom === 'string' || vdom == null;
  if (isTextNode) return document.createTextNode(vdom || '');

  const isObject = typeof vdom === 'object';
  const isElementNode = isObject && typeof vdom.type === 'string';
  if (isElementNode) return createElementDOM(vdom);

  /** 这里区分 类组件和函数组件，类组件实例的render函数返回值同函数组件的返回值，所以放一起了 */
  const isFn = isObject && typeof vdom.type === 'function';
  const isFnComponent = isFn && !vdom.type.isClassComponent;
  // const isClassComponent = isFn && vdom.type.isClassComponent;
  const { type: fn, props } = vdom;
  const vdomComponent = isFnComponent ? fn(props) : new fn(props).render();
  if (isFn) return createElementDOM(vdomComponent);
}

将index.js里面的react和react-dom重新换成我们自己写的，页面正常显示，✌️~~

简单手写实现react的类组件