简单手写实现react的函数组件

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

第一篇是简单手写实现 React 的 createElement 和 render，里面有准备工作，不再赘述。

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

TL;DR

createDOM中增加处理函数组件的情况，执行函数后，然后挂载返回值

科普

什么是函数组件？

函数组件的模样：

const FnComponent = (props) => (
  <h1 className="title" style={{ color: '#f69' }}>
    {props.name}
  </h1>
);

函数组件的特征：

• 函数组件：一个返回react元素的函数，参数可以是props属性对象
• 函数名首字母必须大写，以此区分原生元素
• 返回值只有一个根元素
• 返回值可以是字符串、原生标签根元素、组件标签根元素
• 组件必须先定义后使用

准备工作

先将index.js加入函数组件

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

function FnComponent(props) {
  return (
    <h1 className="title" style={{ color: '#f69' }}>
      {props.name}
    </h1>
  );
}
const reactElement = <FnComponent name="颜酱" />;
// {type: ƒ FnComponent(props), props:{name:'颜酱'}}
console.log(reactElement);
ReactDOM.render(reactElement, document.getElementById('root'));

页面肯定可以渲染

分析函数组件的渲染

1. 借助babel，我们知道<FnComponent name="颜酱"/>相当于React.createElement(FnComponent,{ name:'颜酱' })

2. 看下createElement处理函数组件时候的返回值，{type: ƒ FnComponent(props), props:{name:'颜酱'}}

3. render的时候，相当于render({type: ƒ FnComponent(props), props:{name:'颜酱'}},...)，其实能推测，render 内部，执行函数，然后将函数的返回值，挂载到容器上

所以函数组件的渲染，本质就是createElement返回值额外处理 和 render对于函数的处理。

实现函数组件

1. 修改 createElement

这个很容易，因为 babel 转译的时候，将第一个参数传进来的就是函数，而之前返回值的 type 就是直接返回的第一个参数，所以不用改 type。props就是第二个参数，babel 也给我们处理好了，所以也不用修改。

2. 修改 render

其实也容易，在createDOM中处理函数类型就好。

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);

  /**  新增函数组件的处理 */
  const isFnComponent = isObject && typeof vdom.type === 'function';
  const { type: fn, props } = vdom;
  const vdomComponent = fn(props);
  if (isFnComponent) return createElementDOM(vdomComponent);
}

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