react怎么实现mvvm

React 实现 MVVM 模式的方法

MVVM（Model-View-ViewModel）是一种设计模式，通过数据绑定实现视图（View）和模型（Model）的分离。React 本身基于单向数据流，但可以通过以下方式模拟 MVVM 的核心特性。

使用 React Hooks 和状态管理

React 的 useState 和 useEffect 可以用于实现数据绑定和状态管理，类似于 ViewModel 的功能。

import React, { useState, useEffect } from 'react';

function MVVMExample() {
  const [inputValue, setInputValue] = useState('');

  // 模拟 Model
  const model = {
    data: inputValue,
    updateData: (newValue) => {
      setInputValue(newValue);
    }
  };

  // ViewModel 逻辑
  useEffect(() => {
    console.log('Model updated:', model.data);
  }, [inputValue]);

  return (
    <div>
      <input
        value={inputValue}
        onChange={(e) => model.updateData(e.target.value)}
      />
      <p>Current Value: {model.data}</p>
    </div>
  );
}

使用第三方库（如 MobX）

MobX 提供了响应式数据绑定，更接近 MVVM 的实现方式。

import React from 'react';
import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react';

// Model 和 ViewModel
class Store {
  inputValue = '';

  constructor() {
    makeAutoObservable(this);
  }

  setInputValue(value) {
    this.inputValue = value;
  }
}

const store = new Store();

// View
const MVVMExample = observer(() => {
  return (
    <div>
      <input
        value={store.inputValue}
        onChange={(e) => store.setInputValue(e.target.value)}
      />
      <p>Current Value: {store.inputValue}</p>
    </div>
  );
});

自定义 Hooks 封装 ViewModel

将业务逻辑封装到自定义 Hook 中，实现 ViewModel 的复用。

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

  const handleChange = (newValue) => {
    setValue(newValue);
  };

  return {
    value,
    handleChange
  };
}

function InputComponent() {
  const { value, handleChange } = useInputViewModel('');

  return (
    <div>
      <input
        value={value}
        onChange={(e) => handleChange(e.target.value)}
      />
      <p>Current Value: {value}</p>
    </div>
  );
}

结合 Context API 实现全局状态

通过 React Context 共享 ViewModel，实现跨组件数据绑定。

const InputContext = React.createContext();

function InputProvider({ children }) {
  const [value, setValue] = useState('');

  const contextValue = {
    value,
    setValue
  };

  return (
    <InputContext.Provider value={contextValue}>
      {children}
    </InputContext.Provider>
  );
}

function InputComponent() {
  const { value, setValue } = useContext(InputContext);

  return (
    <div>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <p>Current Value: {value}</p>
    </div>
  );
}

通过这些方法，可以在 React 中实现类似 MVVM 的模式，分离视图逻辑和数据逻辑，提高代码的可维护性和复用性。