vue和react 函数式组件的对比

Question

Vue的函数式组件(JSX)

let myComponent = {
    functional: true,
    props: {},
    render: function (createElement, context) {
        return (
            <div>Hello world</div>
        )
    }
}

React的函数式组件(JSX)

function myComponent(props){
    return (
        <div>Hello world</div>
    )
}

可以看出React的函数式组件要简洁不少，不知道vue3.0会不会简化一下。
React这边因为函数式组件简洁的缘故导致都没什么人用普通组件了。官方也把重心移到函数式组件了。

Answer 1

vue jsx 是有简洁语法糖的：

// Original:
export const A = ({ props }) => <div>{props.msg}</div>

// Result:
export const A = {
  functional: true,
  render: (h, { props }) => <div>{props.msg}</div>
}

不知道发这个问题的意义是什么，吐槽一下？，你可以深入研究实践后，总结个文章，从详细使用差异、需要什么插件、实用性如何、有哪些坑、为什么这样设计来更加详细的对比二者差异

Answer 2

这样看的话Vue有三个编译器Vue Loader, @vue/babel-preset-jsx, 和Vue完整版包含的编译器。他们适用于不同的情况。
函数式组件的语法糖包含在@vue/babel-preset-jsx内