Используется ли MVC в React

Используется ли MVC в React

Краткий ответ

React не использует классический MVC паттерн, вместо этого следует принципам унидирекционального потока данных (one-way data binding) и компонентной архитектуры.

Почему не MVC

MVC (Model-View-Controller) разработан для двусторонней привязки данных (как в Angular):

• Model - хранит данные
• View - отображает данные
• Controller - обрабатывает ввод и изменяет Model

В MVC изменение в View может повлиять на Model, а Model может изменить View - это создаёт сложные зависимости.

// MVC подход (не для React)
// Controller изменяет Model -> View обновляется
// User кликает на View -> Controller узнаёт об этом
// Потенциал для "спагетти-кода"

Архитектура React

React использует идеи, похожие на MVVM и Flux:

1. State (данные) - единственный источник истины
2. Components (представление) - чистые функции, которые рендерят UI
3. Handlers (логика) - функции, которые изменяют state

// React архитектура
function UserProfile() {
  const [user, setUser] = useState(null); // State
  
  const loadUser = async (id) => { // Handler
    const data = await fetch(`/api/users/${id}`);
    setUser(data); // Обновляем state
  };
  
  return ( // View
    <div>
      {user && <h1>{user.name}</h1>}
      <button onClick={() => loadUser(1)}>Загрузить</button>
    </div>
  );
}

Поток данных в React (Flux-подобный)

Action (пользователь кликает)
    |
    v
Handler (handleClick вызывает setState)
    |
    v
State (новое значение state)
    |
    v
Component (компонент рендерится)
    |
    v
UI (пользователь видит результат)

Это однонаправленный поток, что предотвращает циклические зависимости.

Как организовать архитектуру в React

Слойная архитектура (более масштабируемо):

// components/UserCard.tsx - Presentation Layer
interface UserCardProps {
  user: User;
  onUpdate: (user: User) => void;
}

export function UserCard({ user, onUpdate }: UserCardProps) {
  const handleNameChange = (name: string) => {
    onUpdate({ ...user, name });
  };
  
  return (
    <div>
      <input value={user.name} onChange={e => handleNameChange(e.target.value)} />
    </div>
  );
}

// hooks/useUser.ts - Business Logic Layer
export function useUser(id: string) {
  const [user, setUser] = useState<User | null>(null);
  
  useEffect(() => {
    fetchUser(id).then(setUser);
  }, [id]);
  
  const updateUser = async (updates: Partial<User>) => {
    const updated = await api.updateUser(id, updates);
    setUser(updated);
  };
  
  return { user, updateUser };
}

// pages/UserPage.tsx - Container Layer
export function UserPage({ userId }: { userId: string }) {
  const { user, updateUser } = useUser(userId);
  
  if (!user) return <div>Загрузка...</div>;
  
  return <UserCard user={user} onUpdate={updateUser} />;
}

Альтернативы для сложного состояния

Redux или Zustand - используются для глобального состояния, но это не MVC:

// Redux-подобный подход
const store = createStore((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));

function UserProfile() {
  const user = store((state) => state.user);
  const setUser = store((state) => state.setUser);
  
  return <div>{user?.name}</div>;
}

Выводы

• MVC не подходит для React из-за однонаправленного потока данных
• React использует компонентный подход с локальным и глобальным state
• Для организации используй layered architecture (presentation, business logic, data)
• State - это современный аналог Model, Components - это View, Handlers - это часть Controller
• React требует явного управления данными, а не неявного связывания как в MVC

Вместо MVC думай о React как о функциональной архитектуре с однонаправленным потоком данных.