BFE.devAI解答 - JavaScript 代码题
140. Virtual DOM III - Functional Component

思路：需要在原有的 createElement() 和 render() 函数中添加对 Functional Component 的支持。对于 Functional Component，我们只需要调用其函数并传入 props 参数即可得到它的返回值，即一个 MyElement。因此，在 render() 函数中对于传入的函数组件，我们需要调用它，并将 props 作为参数传递进去。在 createElement() 函数中，对于传入的 MyComponent，需要在它的 props 中加入 children 属性，并将函数名添加到 tag 属性中，以便后面可以通过函数名来判断这是一个函数组件。

完整代码如下：

/** * @typedef MyElement * @property {string} tag * @property {Object} props * @property {MyElement[]} children *//** * @param {string} tag * @param {Object=} props * @param {MyElement[]=} children * @returns {MyElement} */function createElement(tag, props = {}, ...children) {  if (typeof tag === 'function') { // 如果传入的是函数    return tag(Object.assign({}, props, { children }));  }  return {    tag,    props: Object.assign({}, props, { children }),    children: flatten(children)  };}/** * @param {MyElement} element * @returns {HTMLElement} */function render(element) {  const el = document.createElement(element.tag);  for (let key in element.props) {    if (key.startsWith('on')) { // 处理事件监听器      el.addEventListener(key.substring(2).toLowerCase(), element.props[key]);    } else if (key === 'className') { // 将 className 改为 class      el.setAttribute('class', element.props[key]);    } else if (key === 'style' && typeof element.props[key] === 'object') { // 处理 style 属性      const styles = Object.keys(element.props.style).map(key => `${key}:${element.props.style[key]}`).join(';');      el.setAttribute('style', styles);    } else if (key === 'value' && element.tag === 'input') { // 处理 input 的 value 属性      el.value = element.props[key];    } else if (key !== 'children') { // 其他属性直接设置      el.setAttribute(key, element.props[key]);    }  }  element.children.forEach(child => {    const childEl = child instanceof MyElement ? render(child) : document.createTextNode(child);    el.appendChild(childEl);  });  return el;}/** * 将多维数组扁平化 * @param {Array} arr * @returns {Array} */function flatten(arr) {  return arr.reduce((prev, curr) => {    return prev.concat(Array.isArray(curr) ? flatten(curr) : curr);  }, []);}

测试代码如下：

const h = createElementconst Title = ({ children, ...res }) => h('h1', res, ...children)const Link =  ({ children, ...res }) => h('a', res, ...children)const Name =  ({ children, ...res }) => h('b', res, ...children)const Button =  ({ children, ...res }) => h('button', res, ...children)const Paragraph =  ({ children, ...res }) => h('p', res, ...children)const Container =  ({ children, ...res }) => h('div', res, ...children)const app = h(  Container,  {},  h(Title, {}, ' this is '),  h(    Paragraph,    { className: 'paragraph' },    ' a ',    h(Button, {}, ' button '),    ' from ',    h(      Link,      { href: 'https://bfe.dev' },      h(Name, {}, 'BFE'),      '.dev')  ))document.body.appendChild(render(app))