简单手写实现react的类组件
继续学习写源码系列，本系列是学习系列。
- 简单手写实现 React 的 createElement 和 render，里面有准备工作，不再赘述。
- 简单手写实现 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'));
页面肯定可以渲染
分析类组件的渲染
- 借助babel，我们知道
<ClassComponent name="颜酱"/>相当于React.createElement(ClassComponent,{ name:'颜酱' }) - 看下
createElement处理函数组件时候的返回值，{type: class ClassComponent..., props:{name:'颜酱'}} render的时候，相当于render({type: class ClassComponent..., props:{name:'颜酱'}},...)，其实能推测，render 内部，新建类的实例，执行实例的render函数，然后将函数的返回值，挂载到容器上class的时候extends的是React.Component，所以React需要加上Component类- 类组件和函数组件，type 都是函数类型，为了加以区分，在类上可以加个静态标识属性
- 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重新换成我们自己写的，页面正常显示，✌️~~
网络异常，图片无法展示
|
