react native 几种常见的状态管理和架构模式

react native中有没有mvvm等设计模式，业务和数据分离

在 React Native 中，有几种常见的状态管理和架构模式可以帮助实现业务和数据分离：

1. Redux (最经典的状态管理方案)

javascript
CopyInsert
// actions/userActions.js
export const fetchUserData = (userId) => {
  return async (dispatch) => {
    try {
      const userData = await UserService.getUserDetails(userId);
      dispatch({
        type: 'FETCH_USER_SUCCESS',
        payload: userData
      });
    } catch (error) {
      dispatch({
        type: 'FETCH_USER_FAILURE',
        error
      });
    }
  };
};

// reducers/userReducer.js
const initialState = {
  userData: null,
  loading: false,
  error: null
};

export const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_USER_SUCCESS':
      return {
        ...state,
        userData: action.payload,
        loading: false
      };
    // 其他 case
    default:
      return state;
  }
};

2. MobX (响应式状态管理)

javascript
CopyInsert
import { makeAutoObservable } from 'mobx';

class UserStore {
  userData = null;
  loading = false;
  error = null;

  constructor() {
    makeAutoObservable(this);
  }

  async fetchUserData(userId) {
    this.loading = true;
    try {
      this.userData = await UserService.getUserDetails(userId);
      this.loading = false;
    } catch (error) {
      this.error = error;
      this.loading = false;
    }
  }
}

export const userStore = new UserStore();

3. Context API (React 内置的轻量级状态管理)

javascript
CopyInsert
// UserContext.js
import React, { createContext, useState, useContext } from 'react';

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(false);

  const fetchUserData = async (userId) => {
    setLoading(true);
    try {
      const data = await UserService.getUserDetails(userId);
      setUserData(data);
      setLoading(false);
    } catch (error) {
      setLoading(false);
    }
  };

  return (
    <UserContext.Provider value={{ 
      userData, 
      loading, 
      fetchUserData 
    }}>
      {children}
    </UserContext.Provider>
  );
};

export const useUser = () => useContext(UserContext);

4. MVVM 架构实现

javascript
CopyInsert
// ViewModel
class UserViewModel {
  constructor(userRepository) {
    this.userRepository = userRepository;
    this.userData = observable({});
    this.loading = observable(false);
    this.error = observable(null);
  }

  async fetchUserData(userId) {
    this.loading.set(true);
    try {
      const data = await this.userRepository.getUserDetails(userId);
      this.userData.set(data);
      this.loading.set(false);
    } catch (error) {
      this.error.set(error);
      this.loading.set(false);
    }
  }
}

// Repository (数据层)
class UserRepository {
  async getUserDetails(userId) {
    // 数据获取逻辑
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
  }
}

// Component
const UserProfile = observer(({ viewModel }) => {
  useEffect(() => {
    viewModel.fetchUserData(123);
  }, []);

  if (viewModel.loading) return <LoadingIndicator />;
  if (viewModel.error) return <ErrorMessage />;

  return (
    <View>
      <Text>{viewModel.userData.name}</Text>
    </View>
  );
});

5. Clean Architecture 实现

javascript
CopyInsert
// Domain Layer (实体)
class User {
  constructor(id, name, email) {
    this.id = id;
    this.name = name;
    this.email = email;
  }
}

// Data Layer (数据源)
class UserRemoteDataSource {
  async fetchUser(userId) {
    const response = await apiClient.get(`/users/${userId}`);
    return response.data;
  }
}

// Repository Layer
class UserRepository {
  constructor(remoteDataSource) {
    this.remoteDataSource = remoteDataSource;
  }

  async getUser(userId) {
    const userData = await this.remoteDataSource.fetchUser(userId);
    return new User(
      userData.id, 
      userData.name, 
      userData.email
    );
  }
}

// Use Case
class GetUserUseCase {
  constructor(userRepository) {
    this.userRepository = userRepository;
  }

  async execute(userId) {
    return await this.userRepository.getUser(userId);
  }
}

// ViewModel
class UserViewModel {
  constructor(getUserUseCase) {
    this.getUserUseCase = getUserUseCase;
    this.user = null;
    this.loading = false;
  }

  async loadUser(userId) {
    this.loading = true;
    try {
      this.user = await this.getUserUseCase.execute(userId);
    } finally {
      this.loading = false;
    }
  }
}

推荐方案：

1. 小型项目：Context API
2. 中型项目：MobX
3. 大型项目：Redux 或 Clean Architecture

选择建议：

• 业务简单：Context API
• 响应式需求：MobX
• 复杂状态管理：Redux
• 大型企业级：Clean Architecture

关键原则：

• 关注点分离
• 单一职责
• 依赖倒置
• 高内聚，低耦合

推荐学习路径：

1. 理解 React Hooks
2. 学习 Context API
3. 深入 MobX
4. 掌握 Redux
5. 研究 Clean Architecture