React&Vue系列：变量的定义_react 定义变量-CSDN博客

本文链接：https://blog.csdn.net/Cipher_Y/article/details/131846392

本文对比了React和Vue在定义变量方面的差异，包括React的useState和useReducer，以及Vue3的ref和reactive。讨论了如何定义基本数据类型和复杂数据类型，以及它们的更新机制。React使用浅比较，Vue3提供了两种定义变量的函数，各有适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景：作为使用三年 react.js 的搬运工，目前正在积极学习 vue.js 语法，而在学习的过程中，总是喜欢和 react.js 进行对比，这里也不是说谁好谁坏，而是怀有他有我也有，他没我还有的思想去学习，去总结。

React18 Vue3

后面打算陆续更新一系列的关于 React 和 Vue 基本语法对比的文章，其中的好与坏，对与错，都可以多多指教，相互学习。

当然这里只讨论函数式编程。因为无论是 React18，还是 Vue3 都是采用了函数编程。类似 React 类组件或者 Vue3 options api 写法这里就不多做解释了。

话不多说，正题开始。

先从简单的开始，变量的定义。

对 React 比较熟悉，React 有优先权。

React 定义变量

在 React 中，如果不讨论类组件的写法，那么就是函数组件。而函数组件又可以分为：

无状态的函数组件
有状态的函数组件

无状态的函数组件，就仅仅展示数据而已。而针对有状态的函数组件，就需要利用 hooks 的写法来定义状态（也就是变量）。

基本使用

可以采用两种方式来定义变量：

useState 的方式

js复制代码import { useState } from 'react'

// 定义变量
const [state, setState] = useState(initialState);

state 变量名称
setState 修改变量名称的方法
initialState 用来给变量设置初始值

useReducer 的方式

js复制代码import { useReducer } from 'react'

function reducer(state, action) {
  switch (action.type) {
    case 'increment': 
      return state + 1;
    case 'decrement': 
      return state - 1;
    default:
      return state;
  }
}

const initialArg = 0 // 初始值

// 定义变量
const [state, dispatch] = useReducer(reducer, initialArg， init？);

state 变量名称
dispatch 更新变量状态的方法
reducer 函数，根据传入的参数（state,action)，返回新的状态值
initialArg 初始值
init (可选) 如果存在，就是调用 init(initialArg) 的返回值作为初始值

TypeScript 写法

useState 方式

ts复制代码function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

// example
const [count, setCount] = useState<number>(0)

useState 函数接受一个泛型，及 state 的类型。

useReducer 方式

ts复制代码// 重载(有四种情况，就不列举出来了，常用的&#x