• 技术文章 >web前端 >前端问答

    reactjs和vuejs的区别是什么

    青灯夜游青灯夜游2021-09-26 16:31:43原创125

    reactjs和vuejs的区别:1、vue是数据双向绑定,react不是双向绑定;2、非父子组件实现通信,react使共同父组件触发事件函数传形参的方式,vue使用订阅/发布模式的方式;3、react用Redux进行状态管理,vue使用vuex。

    本教程操作环境:windows7系统、vue2.9.6&&react16版,DELL G3电脑。

    Vue.js与React.js从某些反面来说很相似,通过两个框架的学习,有时候对一些用法会有一点思考,为加深学习的思索,特翻阅了两个文档,从以下各方面进行了对比,加深了对这两个框架的认知。

    1.数据绑定

    1.1 Vue中有关数据绑定的部分

    1.1.1插值表达式

    插值和指令又称为模板语法
    - 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
    - Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令

    1.1.2 指令

    1.1.3 class与style绑定

    <div v-bind:class="[activeClass, errorClass]"></div>

    1.1.4 条件渲染和列表渲染

    1.1.5 事件处理器

    1.1.6 表单控件

    1.1.7 计算属性

    1.1.8 ajax数据请求

    注: 关于vue的数据双向绑定和单向数据流

    1.2 react没有数据双向绑定

    1.2.1事件处理

    1.2.2 条件渲染

    1.2.3 列表渲染

    1.2.4 表单操作

    1.2.5 状态提升

    2.组件化以及组件数据流

    2.1 react中的组件及数据流

    props与State的区别

    - props是property的缩写,可以理解为HTML标签的attribute。不可以使用this.props直接修改props,因为props是只读的,props是用于整个组件树中传递数据和配置。在当前组件访问props,使用this.props。

    - props是一个组件的设置参数,可以在父控件中选择性设置。父组件对子控件的props进行赋值,并且props的值不可改变。一个子控件自身不能改变自己的 props。

    - state:当一个组件 mounts的时候,state如果设置有默认值的会被使用,并且state可能时刻的被改变。一个子控件自身可以管理自己的state,但是需要注意的是,无法管理其子控件的state。所以可以认为,state是子控件自身私有的。

    - 每个组件都有属于自己的state,state和props的区别在于前者(state)只存在于组件内部,只能从当前组件调用this.setState修改state值(不可以直接修改this.state!)。

    - props是一个父组件传递给子组件的数据流,可以一直的被传递到子孙组件中。然而 state代表的是子组件自身的内部状态。从语义上讲,改变组件的状态,可能会导致dom结构的改变或者重新渲染。而props是父组件传递的参数,所以可以被用于初始化渲染和改变组件自身的状态,虽然大多数时候组件的状态是又外部事件触发改变的。我们需要知道的是,无论是state改变,还是父组件传递的 props改变,render方法都可能会被执行。

    - 一般我们更新子组件都是通过改变state值,更新新子组件的props值从而达到更新。

    2.1.1 组件之间的通信

    1、父子组件数通信

    即:
    - * 父组件更新组件状态 —–props—–> 子组件更新
    - * 子组件更新父组件状态 —–需要父组件传递回调函数—–> 子组件调用触发

    2、非父子组件之间的通信,嵌套不深的非父子组件可以使共同父组件,触发事件函数传形参的方式来实现

    兄弟组件:

    (1) 按照React单向数据流方式,我们需要借助父组件进行传递,通过父组件回调函数改变兄弟组件的props。
    - 其实这种实现方式与子组件更新父组件状态的方式是大同小异的。

    (2) 当组件层次很深的时候,在这里,React官方给我们提供了一种上下文方式,可以让子组件直接访问祖先的数据或函数,无需从祖先组件一层层地传递数据到子组件中。

    2.1.2 组件的生命周期

    construtor() //创建组件
    componentWillMount() //组件挂载之前
    componentDidMount() // 组件挂载之后
    componentWillReceiveProps() // 父组件发生render的时候子组件调用该函数
    shouldComponentUpdate() // 组件挂载之后每次调用setState后都会调用该函数判断是否需要重新渲染组件,默认返回true
    componentDidUpdate() // 更新
    render() //渲染,react中的核心函数
    componentWillUnmount() //组件被卸载的时候调用,一般在componentDidMount注册的事件需要在这里删除

    2.2 vue中的组件和数据流

    2.2.1 组件化应用构建

    2.2.2 响应式

    2.2.3 组件的生命周期

    2.2.3 组件之间的通信

    1.父向子

    - 每个组件实例都有自己的孤立隔离作用域。也就是说,不能(也不应该)直接在子组件模板中引用父组件数据。要想在子组件模板中引用父组件数据,可以使用 props 将数据向下传递到子组件。

    - 每个 prop 属性,都可以控制是否从父组件的自定义属性中接收数据。子组件需要使用 props 选项显式声明 props,以便它可以从父组件接收到期望的数据。

    - 动态Props,类似于将一个普通属性绑定到一个表达式,我们还可以使用 v-bind 将 props 属性动态地绑定到父组件中的数据。无论父组件何时更新数据,都可以将数据向下流入到子组件中

    2.子向父

    - 使用自定义事件
    - 每个 Vue 实例都接入了一个事件接口(events interface),也就是说,这些 Vue 实例可以做到:
    - 使用 on(eventName)监听一个事件−使用emit(eventName) 触发一个事件

    3. 非父子组件通信
    - 可以使用一个空的 Vue 实例作为一个事件总线中心(central event bus),用emit触发事件,on监听事件

    3.状态管理

    3.1 react中的状态管理:Flux

    flux的示意图

    3.2 vue中的状态管理vuex

    4.路由

    4.1 react中的路由

    <Router history={hashHistory}>
      <Route path="/" component={App}/>
      <Route path="/repos" component={Repos}/>
      <Route path="/about" component={About}/>
    </Router>

    - Link组件用于取代元素,生成一个链接,允许用户点击后跳转到另一个路由。它基本上就是元素的React 版本,可以接收Router的状态。

    4.2 vue中的路由

    <div id="app">
      <h1>Hello App!</h1>
      <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>

    5. 渲染性能对比

    5.1 react视图渲染

    组件渲染

    - 当React遇到的元素是用户自定义的组件,它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”。

    5.2 vue视图渲染

    6. 数据更新

    6.1 react数据更新

    6.2 vue数据更新

    7. 开发模式及规模

    7.1 react

    7.1.1 开发模式

    7.1.2 规模

    7.2 vue

    7.2.1 开发模式

    7.2.2 脚手架

    8. HTML&&CSS

    - Vue 的整体思想是拥抱经典的 Web 技术,并在其上进行扩展。

    8.1 react

    8.1.1 JSX

    8.1.2 组件作用域内的CSS

    8.2 vue

    8.2.1 Templates模板语法

    8.2.2 单文件组件CSS

    8.3 小结

    9. 使用场景

    9.1 选择react

    9.1.1 期待构建一个大型应用程序——选择React

    9.1.2 期待同时适用于Web端和原生APP的框架——选择React

    9.1.3 期待最大的生态系统——选择React

    9.2 选择vue

    9.2.1 期待模板搭建应用——选择 Vue

    9.2.2 期待简单和“能用就行”的东西——选择 Vue

    9.2.3 期待应用尽可能的小和快——选择Vue

    10. 服务器端渲染(SSR)

    10.1 react

    10.2 vue

    1. 什么是服务器端渲染(SSR)?

    2. 服务器端渲染优势

    - 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

    - 更快的内容到达时间(time-to-content),特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行,才显示服务器渲染的标记,所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验,并且对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言,服务器端渲染(SSR)至关重要。

    11. 附: react理念

    1. 把UI图划分出组件层级

    2. 用React创建一个静态版本

    3. 定义 UI 状态的最小(但完整)表示

    4. 确定你的State应该位于哪里

    5. 添加反向数据流

    小结

    总结一下,我们发现,

    Vue的优势包括:

    - 模板和渲染函数的弹性选择
    - 简单的语法及项目创建
    - 更快的渲染速度和更小的体积

    React的优势包括:

    - 更适用于大型应用和更好的可测试性
    - 同时适用于Web端和原生App
    - 更大的生态圈带来的更多支持和工具
    - 而实际上,React和Vue都是非常优秀的框架,它们之间的相似之处多过不同之处,并且它们大部分最棒的功能是相通的:
    - 利用虚拟DOM实现快速渲染
    - 轻量级
    - 响应式和组件化
    - 服务器端渲染
    - 易于集成路由工具,打包工具以及状态管理工具
    - 优秀的支持和社区

    相关推荐:《vue.js教程

    以上就是reactjs和vuejs的区别是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vue react
    上一篇:如何用HTML和CSS制作玻璃/模糊效果? 下一篇:javascript nan什么意思
    线上培训班

    相关文章推荐

    • 深入解析vue中路由切换白屏的问题(附代码)• 浅析Vue中入口缓存的问题(代码分享)• MAC环境下安装node、vue等环境配置• 一文讲解Vue中路由切换终止异步请求(附代码)• Uniapp自定义vue导航菜单组件完成菜单动态高亮

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网