1、前言

本节我们添加一个class组件，来完善一下我们的react；

  1. // src/index
  2. import React from '../react'
  4. class Counter extends React.Component {
  5.     render() {
  6.         return (
  7.             <div>
  8.                 <h1>我是</h1>
  9.                 <h2>class组件</h2>
  10.             </div>
  11.         )
  12.     }
  13. }
  15. const element = <Counter />
  17. React.render(element, document.getElementById("root"))

2、实现步骤

2.1 Component.js

我们在写class组件时，都会继承一个React.Component，所以我们先创建一个Component.js文件，使用isReactComponent来标识类组件；

  1. // react/Component
  2. export function Component(props) {
  3.   this.props = props;
  4. }
  5. Component.prototype.isReactComponent = true;

2.2 修改performUnitOfWork方法

修改performUnitOfWork方法，增加对类组件和函数组件的判断；

  1. function performUnitOfWork(fiber) {
  2.   // 函数组件类组件处理
  3.   if (fiber.type && typeof fiber.type === 'function') {
  4.     fiber.type.prototype.isReactComponent ? updateClassComponent(fiber) : updateFunctionComponent(fiber)
  5.   } else {
  6.     // 更新普通节点
  7.     updateHostComponent(fiber)
  8.   }
  10.   // 省略
  12. }
  14. /**
  15.  * 类组件处理
  16.  * @param {*} fiber 
  17.  */
  18. updateClassComponent(fiber){
  19.   // todo
  20. }

2.3 updateClassComponent方法

  1. /**
  2.  * 类组件处理
  3.  * @param {*} fiber 
  4.  */
  5. function updateClassComponent(fiber){
  6.   const {type, props} = fiber;
  7.   const children = [new type(props).render()];
  8.   reconcileChildren(fiber, children)
  9. }

3、实现效果

image.png

4、本节代码

代码地址：https://github.com/linhexs/mini-react/tree/9.class%84%E4%BB%B6/