面试官：聊聊你知道的Vue与React的区别

最近面到很多大公司的时候，小编都会碰到一个很尴尬的问题，很多大公司的技术栈都是React，但是小编学的是Vue，其实从本质上来说两者都是比较优秀的前端框架，所以有些面试官会问到Vue和React的区别。小编认真整理了一些自己所知道的Vue和React的区别，给大家分享分享。

1. 模板语法 vs JSX

• Vue 使用类似于 HTML 的模板语法，例如： 标签中的模板。

  模板示例（Vue）：

  Hello, world!

  Click me
  <script> // 定义一个按钮组件 Vue.component('my-button', { template: '' }); export default { methods: { handleClick() { console.log('Button clicked'); } } }; </script>
  • React 使用 JSX（JavaScript XML）, 它是一种将 HTML 直接嵌入到 JavaScript 代码中的语法。它和Java中的xml十分类似

  JSX 示例（React）：

  import React from 'react'; // 使用 JSX 描述一个简单的按钮组件 const Button = ({ onClick, children }) => { return {children}; }; // 在 JSX 中使用 Button 组件 const App = () => { const handleClick = () => { console.log('Button clicked'); }; return (

  Hello, world!

  Click me
  ); }; export default App;

  2. 组件通信

  • 在 Vue 中，组件间的通信可以使用 props（父子组件通信）、emit（子父组件通信）、emit（子父组件通信）、emit（子父组件通信）、attrs/$listeners（特性和事件继承）、Vuex/Pinia（用于大型应用中的状态管理）等。

  Vue 组件通信示例：

  父组件向子组件传递数据：

  <script> import ChildComponent from './ChildComponent.vue'; export default { data() { return { parentMessage: 'Message from parent' }; }, components: { ChildComponent } }; </script>

  子组件接收数据：

  {{ message }}

  <script> export default { props: { message: String } }; </script>
  • 在 React 中，组件间的通信主要依赖于 props 和 context，但对于更复杂的应用，可以使用 Redux 或其他状态管理库。

  React 组件通信示例：

  父组件向子组件传递数据：

  HB火博官网

  import React from 'react'; import ChildComponent from './ChildComponent'; class ParentComponent extends React.Component { render() { return (

  ); } } export default ParentComponent;

  子组件接收数据：

  import React from 'react'; class ChildComponent extends React.Component { render() { return (

  {this.props.message}

  ); } } export default ChildComponent;

  这些示例演示了父组件向子组件传递数据的过程。在 Vue 中，通过 props 将数据传递给子组件；在 React 中，也是通过 props 实现相同的功能。

  3. 状态管理

  • Vue 有 Vuex/Pinia 用于管理应用的状态。
  • React 没有官方的状态管理库，但有许多第三方库可供选择，最流行的是 Redux。

  4. 生命周期

  • Vue 组件有自己的生命周期钩子，如 created、mounted、updated、destroyed 等，用于在组件生命周期的不同阶段执行代码。
  • React 组件也有生命周期方法，如 componentDidMount、componentDidUpdate、componentWillUnmount 等，但在 React 16.3 版本后，一些生命周期方法已被标记为过时，推荐使用新的生命周期方法或 React Hooks。

  5. diff算法

  React 的 diff 算法：

  • React 使用的是一种基于层级的 diff 算法。当组件的状态发生变化时，React 会比较当前虚拟 DOM 树和上一次更新后的虚拟 DOM 树的差异。
  • React diff 算法会首先比较两棵树的根节点，如果节点类型不同，则直接删除旧节点，插入新节点；如果节点类型相同，则会继续比较子节点。（核心思想是比较和替换节点）
  • React diff 算法会使用一些启发式的策略来尽可能地减少 DOM 操作的次数，例如将子节点列表转换为 key-value 的形式，以便更快地找到需要更新的节点。
  • （必须有key）

  Vue 的 diff 算法：

  

  • Vue 使用的是一种双端比较的 diff 算法。当组件的状态发生变化时，Vue 会同时从新旧虚拟 DOM 树的两端开始比较，找到最长的相同子序列。
  • Vue 会对动态节点进行跟踪，如果一个节点在新旧虚拟 DOM 中位置发生了变化，Vue 会尽可能地将其移动到新的位置，而不是删除和重新插入节点。（核心思想是移动复用节点）
  • Vue 的 diff 算法会通过动态规划的方式找到最优的更新策略，以最小化 DOM 操作的次数。
  • （可以没有key）

  6.不同的页面更新的通知方式

  • Vue在进行数据更改以后，会主动向使用者声明更改信息。
  • React需要通过diff算法计算得知数据变化。

  7.不同的监听方式

  早期的Vue与React

  • Vue中进行页面更新主要是通过给每个元素设置事件监听器（Watcher），在页面发生更改以后，对应的监听器会去更改展示页面。
  • React在原本的浏览器Dom上创建了虚拟Dom，通过原来的Dom与虚拟Dom进行对比，进行修改。(早期的Diff算法出现）

  当然，随之而来的是不同的性能问题，Vue体现在大量Watcher带来的性能损耗上面，React则体现在Diff算法的计算时间中（虚拟Dom计算时间过长会导致卡顿）

  不同的解决方式

  • Vue借鉴了React的监听方式，形成了组件内部元素（diff算法计算）+组件之间（Watcher监听）的方式进行监听，降低了Watcher的数量，也减少了diff大量计算带来的卡顿问题。
  • React则使用了时间分片（允许多个任务轮流使用处理器）的思想，在使用diff算法检查页面更改的过程中，分片进行使用浏览器，在浏览器的空闲时间计算Diff，如果浏览器有高级的需求则让浏览器继续使用进行渲染。
  举报
  评论 0

  请先 登录 后发表评论～
  热门：

  • 90后男生一个
  • 2006年的时
  • 2024天津高
  • 南京地铁线路图
  • “久经战阵”的
  • 阎锡山这个人是
  • DeepSee
  • 过节到大衣哥家
  • ࿑གོམས་ག
  • 今天早上去小姨
  • 点击回到头条首页
    首页
  • 反馈
  • 下载
    扫码下载今日头条
  • 顶部