问答

vue和react 函数式组件的对比

作者:admin 2021-06-14 我要评论

Vue的函数式组件(JSX) let myComponent = { functional: true, props: {}, render: function (createElement, context) { return ( divHello world/div ) }} Rea...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

###

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内

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue和react  函数式组件的对比

    vue和react 函数式组件的对比

  • 关于Vue集成富文本编辑器Tinymce,图片

    关于Vue集成富文本编辑器Tinymce,图片

  • element-ui,表单resetFields方法的疑问

    element-ui,表单resetFields方法的疑问

  • go build 无法编译,且无错误信息

    go build 无法编译,且无错误信息

腾讯云代理商
海外云服务器