React和Vue声明式UI对比篇

大布布将军
55 阅读4分钟

看下React官网怎么说

React 控制 UI 的方式是声明式的。你不必直接控制 UI 的各个部分，只需要声明组件可以处于的不同状态，并根据用户的输入在它们之间切换。这与设计师对 UI 的思考方式很相似。

聊到 声明式UI 就避不开 命令式UI，那么它们分别是什么意思？

什么是声明式 UI？ 声明式 UI 是一种编程范式，开发者只需要描述 UI 应该是什么样子，而不需要关心具体如何实现 UI 的更新。 什么是命令式 UI？我们换种描述 以上的过程直接告诉你如何去实现交互。你必须去根据要发生的事情写一些明确的命令去操作 UI。对此有另一种理解方式，想象一下，当你坐在车里的某个人旁边，然后一步一步地告诉他该去哪。他并不知道你想去哪，只想跟着命令行动。（并且如果你发出了错误的命令，那么你就会到达错误的地方）正因为你必须从加载动画到按钮地“命令”每个元素，所以这种告诉计算机如何去更新 UI 的编程方式被称为命令式编程。

想象一个让用户提交答案的表单：

  • 当你向表单输入数据时，“提交”按钮会随之变成可用状态
  • 当你点击“提交”后，表单和提交按钮都会随之变成不可用状态，并且会加载动画会随之出现
  • 如果网络请求成功，表单会随之隐藏，同时“提交成功”的信息会随之出现
  • 如果网络请求失败，错误信息会随之出现，同时表单又变为可用状态

React 的声明式 UI 核心理念：UI = f(state) React 认为 UI 应该是状态的函数，状态变化时 UI 自动更新。 特点： 1、单向数据流；2、不可变更新；

Vue 的声明式 UI 核心理念：响应式数据绑定 Vue 通过响应式系统自动建立数据与 UI 的绑定关系。 特点： 1、模板语法；2、响应式系统；

React中的声明式UI

在React中，声明式UI体现在：

  • 组件渲染：你通过JSX描述UI应该长什么样子，而不用直接操作DOM。

  • 状态驱动：当状态（state）发生变化时，React会自动重新渲染组件，并更新DOM以匹配最新的状态。

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点击
      </button>
    </div>
  );
}

Vue中的声明式UI

Vue同样采用声明式UI，但实现方式有所不同。Vue使用模板（template）和响应式系统。

<template>
  <div>
    <p>你点了 {{ count }} 次</p>
    <button @click="increment">点 我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
  	//新增函数
    increment() {
      this.count++;
    }
  }
}
</script>

在Vue中，我们通过模板声明UI，并通过数据驱动视图。当数据改变时，Vue的响应式系统会自动更新DOM。

React和Vue双方对比如下：

  1. 学习曲线
  • React：需要理解 JSX、状态不可变（mutation）、函数式编程等概念。
  • Vue：类似HTML的模板语法和指令对于初学者友好，但需要理解响应式原理等概念。
  1. 状态管理
  • React：使用状态（state）和更新函数（如useState中的setter函数）。状态更新后，组件重新渲染。
  • Vue：使用data选项return的对象，这些状态是响应式的。当状态发生变化时，视图自动更新。
  1. 更新机制
  • React：当状态改变时，重新调用组件函数进行渲染，然后通过虚拟DOM（Virtual DOM） diff算法 计算出需要更新的最小DOM操作。（这里又涉及到react版本16更新之后的一些改变，之后我们会聊到）
// React - 需显式处理状态更新，强调数据不可变性
function SetUserForm() {
  const [form, setForm] = useState({ name: '', email: '' });
  
  const updateMethod = (field, value) => {
    setForm(prev => ({ ...prev, [field]: value }));
  };
  
  return (
    <input 
      value={form.name}
      onChange={(e) => updateMethod('name', e.target.value)}
    />
  );
}
  • Vue：状态变化响应式系统自动跟踪并触发重新渲染，然后通过Virtual DOM进行更新。
<template>
  <!-- Vue - 自动响应式更新 -->
  <input v-model="form.name" />
</template>

<script>
export default {
  data() {
    return {
      form: { name: '', age: '' }
    };
  }
  // 不需要手动更新逻辑
};
</script>
  1. 响应式原理
  • React：React的状态更新是显式的，你必须调用setState或useState的更新函数来更新状态，然后React会重新渲染。React不跟踪状态和组件之间的依赖，每次渲染都是基于当前状态。
  • Vue：Vue使用响应式系统，在初始化时对data进行递归遍历，使用Object.defineProperty（Vue2）或Proxy（Vue3）来劫持属性的getter和setter。当数据被访问时，会收集依赖（组件）；当数据修改时，会通知依赖更新。

以上就是关于React 和 Vue 声明式UI的大概比对，如果您有不一样的认识或者疑问，欢迎评论区留言。 我是大布布将军，一个平凡的AICodeing思考者。

avatar
文章
阅读
粉丝