zoukankan      html  css  js  c++  java
  • xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

    React vs Vue in 2020

    技术选型

    React

    // UserProfile.jsx
    function UserProfile({id, showAvatar, onFollowClick}: {
      id: string,
      showAvatar: boolean,
      onFollowClick: () => void,
    }) {
      const [user, setUser] = React.useState(undefined);
      React.useEffect(() => {
        fetchUser(id).then(setUser);
      }, [id]);
      return (
        <div>
          <div>{id}</div>
          {showAvatar ? <Avatar id={id} /> : null}
          {user !== undefined ? <UserBody user={user} /> : null}
          <button onClick={onFollowClick}>Follow</button>
        </div>
      );
    }
    

    Vue

    // UserProfile.vue
    <div>
      <div>{{ id }}</div>
      <Avatar v-if="showAvatar" :id="id" />
      <UserBody v-if="user" :user="user" />
      <button @click="$emit('follow-click')">Follow</button>
    </div>
    defineComponent({
      props: {
        id: { type: String },
        showAvatar: { type: Boolean },
      },
      setup(props) {
        const {id} = toRefs(props);
        const user = ref(undefined);
        function updateUser() {
          fetchUser(id.value).then(data => {
            user.value = data;
          });
        }
        onMounted(updateUser);
        watch(id, updateUser);
        return {user};
      }
    })
    

    结论

    如果您是正确性和爱情类型系统的忠实拥护者(我就是其中之一),您可能会更喜欢React。它与TypeScript搭配使用效果更好,并且语言方法更纯正。

    Vue具有全局名称空间(尽管您可以避免使用它),但是自定义事件,插件和mixins之类的功能具有JS的动态特性。

    出于这个原因,我希望有许多工程师在大型代码库中的复杂应用中使用React。

    如果您喜欢从HTML /静态内容开始并大量使用JavaScript的想法,那么您可能会喜欢Vue的模板方法。

    对于不熟悉JavaScript的开发人员,Vue可能更容易上手。
    模板是直观的,可以逐步采用。您无需考虑重新渲染,数据绑定很容易理解。

    这并不是说您无法使用Vue构建复杂的应用程序。如果您花费大量时间在JavaScript上,您可能会喜欢React的更纯净的语言方法。

    最后,很难忽视React的大规模采用和庞大的生态系统。对于公司而言,React是风险较小的选择。

    具有React经验的工程师要多于Vue的经验。招聘可能会更容易。此外,还有更多其他的React渲染目标(如React Native)可能会有用。

    归根结底,您可以同时使用两个框架。我个人仍然更喜欢React,但我不能说它绝对更好。

    refs

    https://bypaulshen.com/posts/comparing-vue-and-react/


    Flag Counter

    ©xgqfrms 2012-2020

    www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


  • 相关阅读:
    0x55 环形与后效性问题
    0x54 树形DP
    0x53 区间DP
    0x52 背包
    0x51 线性DP
    poj1015 Jury Compromise
    973、863计划取消 国家重点研发计划启动
    中科院院士陈仙辉回母校:英雄不问出处 成功要靠努力和实力来实现
    Resume (Curriculum Vitae)
    阅读linux内核代码的工具-- Source Insight
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/13494562.html
Copyright © 2011-2022 走看看