简单手写实现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'));
页面肯定可以渲染
分析函数组件的渲染
- 借助babel，我们知道
<FnComponent name="颜酱"/>相当于React.createElement(FnComponent,{ name:'颜酱' }) - 看下
createElement处理函数组件时候的返回值，{type: ƒ FnComponent(props), props:{name:'颜酱'}} 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重新换成我们自己写的，页面正常显示，✌️~~
网络异常，图片无法展示
|
