vue和react 函数式组件的对比

新手上路,请多包涵

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这边因为函数式组件简洁的缘故导致都没什么人用普通组件了。官方也把重心移到函数式组件了。

阅读 2.4k
2 个回答

vue jsx 是有简洁语法糖的:

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏