zoukankan      html  css  js  c++  java
  • vue与react对比总结(一)


    一、react和vue设计上的共同理念

    1、使用 Virtual DOM

    2、提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。

    3、将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库(比如我们后面要提到的vue-router、react-router、vue、redux等)。

    4、都拥有自己的脚手架,便于用户对于项目基础的搭建(vue-cli和create-react-app)

    二、从设计理念上来讲的不同之处

    1、React的是采用了函数式的编程思想、是单向数据流,而vue更偏重响应式、数据是可变的。

    • 在react中,数据的流向是单向,也就是说,数据只会从父组件流向子组件。

    react在经过setState对数据进行改变后,如果shouldComponentUpdate返回的是true,就继续渲染,如果返回了false,就不会重新渲染。而使用PureComponent就相当于是重写了shouldComponentUpdate,然后在里面作了props和state的浅层对比。

    在这里的渲染,会以当前数据改变的组件为根节点,对该子树全部进行重新渲染。但是这个过程中,我们需要保证这颗子树是一个类似纯函数的概念,也就是说,所有的输出都由输入的props来决定,否则通过shouldComponentUpdate和PureComponent进行优化会导致组件有难以察觉的渲染结果不一致。

    • 在vue中,组件的依赖是在渲染过程中自动追踪的。

    也就是说,vue会对每一个属性都建立一个监听器,当被监听的属性发生变化时,vue会定位到数据发生变化的组件并且之重新渲染该节点,而不是重新渲染该子树,相当于vue自动为我们做了shouldComponentUpdate的优化。但是随之而来的,当vue中的state越来越多时,vue注册的监听器也越来越多,会导致些许的卡顿。

    这也是为什么,我们在构建大型应用时,更偏重选择需要手动优化的react而不是自动优化的vue。但是当我们构建小型应用时,vue的优点是毋庸置疑的。

    2、 React 中,所有的组件的渲染功能都依靠 JSX,而vue虽然也提供了函数渲染,但是我们还是更推荐使用模板进行书写

    • react中,所有组件的渲染都是依靠jsx进行的,而jsx的本质是使用 XML 语法编写 JavaScript 的一种语法糖。而他的优点也是显而易见的。

    你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。

    开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如,linting、类型检查、编辑器的自动完成)。

    • 在vue中,任何合乎html规范的都是合法的vue模板

    事实上vue也提供了渲染函数,但是在vue api设计的基础上,模板可以更好地契合vue的各种修饰符,以此可以用更少的代码来实现和jsx相同的功能。

    同时模板的易于读懂以及便于迁移的特点,也更加契合用户的使用习惯。

    三、从二者的生态圈来看

    1、Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。但相对的,React 的生态系统相比 Vue 更加繁荣。

    2、虽然vue和react都提供了脚手架以便于开发者快速搭建项目,但是create-react-app相比较vue-cli有更多的局限性。

    3、React 学习曲线陡峭,在你开始学 React 前需要预先对jsx以及es6进行一定程度的了解,在这个基础上才能更好的学习react和构建react系统;而vue可能只需要在你了解了vue的文档之后,就可以着手进行项目的开发。


     后续会继续升入细化进行两个框架的各方面对比,包括从api和技术选型两个角度来做一个详细的解读

    参考文献: https://cn.vuejs.org/v2/guide/comparison.html

  • 相关阅读:
    springboot使用war包部署到外部tomcat
    html只允许输入的数据校验,只允许输入字母汉字数字等
    转:执行ajax加载页面中的js
    php 解析xml 的四种方法(转)
    Php 获取xml中的节点值
    php中DOMDocument简单用法(XML创建、添加、删除、修改)
    PHP对XML文件操作详细
    转载 PHP 程序员学数据结构与算法之《栈》
    php读取二进制流(C语言结构体struct数据文件)的深入解析
    关于php和C语言接口的结构传递问题,udp,tcp通信
  • 原文地址:https://www.cnblogs.com/marui01/p/13215454.html
Copyright © 2011-2022 走看看