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

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

框架

我最近在学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)}
    />
  );
}

我来解答赞 2 收藏

反馈

1 条解答

书生シ云辰 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