当前位置：首页 > React

react 如何对应mvc

2026-02-26 04:41:00React

React 与 MVC 模式的对应关系

React 是一个用于构建用户界面的 JavaScript 库，其设计理念与传统的 MVC（Model-View-Controller）模式有所不同。React 更倾向于单向数据流和组件化架构，但可以通过合理的设计与 MVC 模式中的概念对应起来。

Model 层对应

在 React 中，Model 层通常由状态管理工具（如 Redux、MobX 或 Context API）实现，负责管理应用的数据和业务逻辑。Redux 的 Store 或 MobX 的 Observable 可以视为 Model 层的实现。

// Redux 示例：Model 层
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

View 层对应

React 组件直接对应 MVC 中的 View 层，负责渲染 UI。组件通过 Props 接收数据，并通过 State 管理内部状态。

// React 组件：View 层
function CounterView({ count, onIncrement }) {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={onIncrement}>Increment</button>
    </div>
  );
}

Controller 层对应

React 中的 Controller 逻辑通常分散在组件生命周期方法、事件处理函数或自定义 Hooks 中。例如，通过 useEffect 或 onClick 处理用户交互和数据更新。

// React 中的 Controller 逻辑
function CounterController() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1); // 更新状态（Model）
  };

  return <CounterView count={count} onIncrement={handleIncrement} />;
}

完整 MVC 架构示例

结合 Redux 和 React，可以更清晰地分离 MVC 各层：

Model: Redux Store 管理全局状态。
View: React 组件渲染 UI。
Controller: Redux Actions 和 React 事件处理函数协调数据流。

// Model (Redux)
const store = createStore(counterReducer);

// View (React)
function App() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <CounterView
      count={count}
      onIncrement={() => dispatch({ type: 'INCREMENT' })}
    />
  );
}