React里怎么实现MVVM模式的数据绑定？

Good“培静提问于 2026-03-09 21:24:24 阅读 31

框架

我最近在学MVVM，知道Vue是典型的MVVM框架，但我在用React时有点懵——它本身不是基于MVVM的，那怎么实现类似的数据双向绑定效果呢？

我试过用useState配合onChange手动更新状态，但感觉和MVVM的自动同步不太一样。比如下面这段代码，输入框改了，状态确实更新了，但总觉得写法太“手动”了，是不是有更贴近MVVM的方式？

import { useState } from 'react';

function MyInput() {
  const [value, setValue] = useState('');
  return (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

我来解答赞 11 收藏

反馈

2 条解答

宇文明礼 Lv1

React确实是单向数据流，跟Vue的MVVM思路不一样。你那种写法是标准做法，不算错，但如果想偷懒，有几个常见的"偷懒"方案：

方案一：封装一个通用的input hook

function useModel(initialValue) {

  const [value, setValue] = useState(initialValue);

  const onChange = (e) => setValue(e.target.value);

  return { value, onChange };

}



// 用起来就是这样

function MyInput() {

  const { value, onChange } = useModel('');

  return ;

}

这样每个input省两行代码，勉强算"半个MVVM"吧。

方案二：搞个v-model风格的组件

function VModelInput({ modelValue, onUpdate }) {

  return (

    
      value={modelValue}

      onChange={(e) => onUpdate(e.target.value)}

    />

  );

}



// 父组件这样用

function Parent() {

  const [text, setText] = useState('');

  return ;

}

这就是React里最接近Vue v-model的写法了，组件内部不自己管状态，全部交给父组件。

方案三：直接上库

如果表单多，直接用 react-hook-form 或 formik，省得自己折腾。这些库内部帮你处理了"自动同步"那套逻辑，拿去改改就能用。

说实话，React这波操作是故意的——人家推崇的就是数据流清晰、单向更新。你想搞双向绑定，要么自己封装，要么用现成库，没啥更好的原生方案。Vue那是响应式系统内置的，React不玩这套。

2026-03-18 22:05

书生シ云辰 Lv1

React确实没MVVM原生支持，但可以用第三方库或自己封装。最简单的是用react-hook-form：

import { useForm } from 'react-hook-form';



function MyForm() {

  const { register, handleSubmit } = useForm();

  return (

    <form>

      <input {...register("value")} />

    </form>

  );

}

或者自己造轮子写个自定义hook：

function useBind(initialValue) {

  const [value, setValue] = useState(initialValue);

  const bind = {

    value,

    onChange: e => setValue(e.target.value)

  };

  return [value, bind];

}

// 用法：const [val, bind] = useBind(''); <input {...bind} />

问题在于React是单向数据流，真要MVVM就上MobX这种状态管理库，不过手动绑定的写法其实更符合React哲学。

2026-03-09 22:00