MVP-Demo: 一个全方位的React Native实践项目

一、背景与问题

在移动应用开发领域，架构模式的选择直接影响项目的可维护性和扩展性。React Native作为跨平台开发框架，其组件化特性使得传统MVC架构的实现较为直接，但当项目规模扩大时，MVC模式容易导致业务逻辑与UI耦合、状态管理混乱等问题。

以一个典型电商应用为例，当需要实现商品列表展示、商品详情、购物车功能时，传统MVC模式会面临以下问题：

商品数据的获取和展示逻辑混杂在组件中
多个组件间的状态共享需要复杂的事件传递机制
业务逻辑的复用性差，导致代码冗余

MVP（Model-View-Presenter）架构模式通过将业务逻辑封装到Presenter层，实现View与业务逻辑的解耦，特别适合需要高度可测试性和复杂业务逻辑的场景。

二、基本原理

MVP模式包含三个核心组件：

Model：负责数据存储和业务逻辑，通常与后端API交互
View：负责UI展示，不包含任何业务逻辑
Presenter：作为中间层，协调Model和View的交互

在React Native中，由于其基于JavaScript的声明式UI特性，需要重新定义传统MVP的实现方式。我们采用以下设计：

View：React Native组件（如<View>、<Text>）
Presenter：自定义的业务逻辑类
Model：数据处理逻辑（可能包含Redux等状态管理方案）

关键特性：

View通过回调函数与Presenter通信
Presenter处理用户输入和业务逻辑
通过事件系统实现异步数据更新

三、环境准备

项目依赖：

npm install react-native
npm install @react-navigation/native
npm install @react-navigation/stack
npm install axios

开发环境要求：

Node.js 18+
Android Studio（Android开发）
Xcode（iOS开发）
React Native CLI

四、核心实现

1. 基础架构设计

// App.js
import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. MVP模式的View层实现

// screens/HomeScreen.tsx
import React, { useCallback } from 'react';
import { View, FlatList, Text, TouchableOpacity } from 'react-native';
import { usePresenter } from '../hooks/usePresenter';

interface Product {
  id: string;
  name: string;
  price: number;
}

const HomeScreen: React.FC = () => {
  const presenter = usePresenter<HomePresenter>();
  
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <FlatList
        data={presenter.products}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <TouchableOpacity 
            onPress={() => presenter.onProductPress(item)}
          >
            <View style={{ padding: 16, borderBottomWidth: 1 }}>
              <Text>{item.name}</Text>
              <Text>${item.price.toFixed(2)}</Text>
            </View>
          </TouchableOpacity>
        )}
      />
    </View>
  );
};

export default HomeScreen;

3. Presenter层实现

// presenters/HomePresenter.ts
import { useNavigation } from '@react-navigation/native';
import { Product } from '../types';

export class HomePresenter {
  private navigation: any;
  private products: Product[];
  
  constructor() {
    this.navigation = useNavigation();
    this.products = this.fetchProducts();
  }
  
  private fetchProducts(): Product[] {
    // 模拟从API获取数据
    return [
      { id: '1', name: 'Product A', price: 99.99 },
      { id: '2', name: 'Product B', price: 149.99 },
      { id: '3', name: 'Product C', price: 79.99 },
    ];
  }
  
  onProductPress(product: Product) {
    this.navigation.navigate('Detail', { product });
  }
}

4. Model层实现

// models/ProductModel.ts
export interface Product {
  id: string;
  name: string;
  price: number;
  description?: string;
}

export class ProductModel {
  static async fetchProducts(): Promise<Product[]> {
    // 模拟网络请求
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve([
          { id: '1', name: 'Product A', price: 99.99, description: 'High quality product' },
          { id: '2', name: 'Product B', price: 149.99, description: 'Premium features' },
          { id: '3', name: 'Product C', price: 79.99, description: 'Great value' },
        ]);
      }, 1000);
    });
  }
}

五、完整案例

电商应用案例：商品详情页

1. 界面设计

// screens/DetailScreen.tsx
import React, { useCallback } from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import { usePresenter } from '../hooks/usePresenter';

interface Product {
  id: string;
  name: string;
  price: number;
  description: string;
  image: string;
}

const DetailScreen: React.FC = () => {
  const presenter = usePresenter<DetailPresenter>();
  
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Image 
        source={{ uri: presenter.product.image }} 
        style={{ width: '100%', height: 300, borderRadius: 8 }}
      />
      <Text style={{ fontSize: 24, marginVertical: 16 }}>{presenter.product.name}</Text>
      <Text style={{ fontSize: 18, color: '#333' }}>${presenter.product.price.toFixed(2)}</Text>
      <Text style={{ marginVertical: 16 }}>{presenter.product.description}</Text>
      <TouchableOpacity 
        onPress={() => presenter.addToCart()}
        style={{ 
          backgroundColor: '#007BFF', 
          padding: 16, 
          borderRadius: 8 
        }}
      >
        <Text style={{ color: 'white', fontSize: 16 }}>Add to Cart</Text>
      </TouchableOpacity>
    </View>
  );
};

export default DetailScreen;

2. Presenter实现

// presenters/DetailPresenter.ts
import { useNavigation } from '@react-navigation/native';
import { Product } from '../types';

export class DetailPresenter {
  private navigation: any;
  private product: Product;
  
  constructor(product: Product) {
    this.navigation = useNavigation();
    this.product = product;
  }
  
  addToCart() {
    // 模拟添加购物车操作
    console.log(`Adding product ${this.product.id} to cart`);
    
    // 跳转到购物车页面
    this.navigation.navigate('Cart');
  }
}

3. 路由配置

// App.js
import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailScreen from './screens/DetailScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

六、源码解析

1. Presenter的生命周期管理

在React Native中，Presenter的生命周期需要与组件生命周期保持同步。通过自定义Hook实现：

// hooks/usePresenter.ts
import React, { useEffect, useRef } from 'react';

export function usePresenter<PresenterType>(Presenter: new (props: any) => PresenterType) {
  const presenterRef = useRef<PresenterType | null>(null);
  
  useEffect(() => {
    // 初始化Presenter
    presenterRef.current = new Presenter({ /* 传递初始参数 */ });
    
    // 清理逻辑
    return () => {
      if (presenterRef.current) {
        // 执行清理操作
      }
    };
  }, [Presenter]);
  
  return presenterRef.current;
}

2. 事件系统实现

通过React的事件系统实现Presenter与View的通信：

// presenters/HomePresenter.ts
import { useNavigation } from '@react-navigation/native';

export class HomePresenter {
  private navigation: any;
  
  constructor() {
    this.navigation = useNavigation();
  }
  
  onProductPress(product: Product) {
    this.navigation.navigate('Detail', { product });
  }
}

七、进阶使用

1. 与Redux的集成

// store/index.ts
import { createStore } from 'redux';
import rootReducer from './reducers';

export default createStore(rootReducer);

// reducers/productReducer.ts
const initialState = {
  products: [] as Product[],
};

export default function productReducer(state = initialState, action: any) {
  switch (action.type) {
    case 'FETCH_PRODUCTS':
      return { ...state, products: action.payload };
    default:
      return state;
  }
}

2. 状态管理优化

// hooks/useProductState.ts
import { useSelector, useDispatch } from 'react-redux';
import { fetchProducts } from '../actions';

export function useProductState() {
  const products = useSelector((state: any) => state.products);
  const dispatch = useDispatch();
  
  const fetchProducts = useCallback(() => {
    dispatch(fetchProducts());
  }, [dispatch]);
  
  return { products, fetchProducts };
}

八、性能与工程实践

1. 性能优化策略

懒加载组件：使用React.lazy和Suspense实现按需加载
内存管理：使用useEffect清理资源，避免内存泄漏
渲染优化：使用shouldComponentUpdate或React.memo减少不必要的渲染
网络请求优化：使用axios的缓存机制，减少重复请求

2. 异常处理机制

// utils/errorHandler.ts
export function handleAPIError(error: any) {
  console.error('API Error:', error);
  
  if (error.response) {
    // 处理HTTP错误
    console.log(`Server responded with ${error.response.status}`);
  } else if (error.request) {
    // 处理网络错误
    console.log('No response received from server');
  } else {
    // 处理其他错误
    console.log('Error:', error.message);
  }
}

3. 安全考虑

敏感数据加密：使用crypto-js库加密敏感信息
API安全：使用JWT进行身份验证
输入校验：使用Joi进行数据验证
安全头设置：配置CORS和内容安全策略

九、常见问题与踩坑

1. Presenter与View的耦合问题

错误示例：

// 错误的Presenter实现
class HomePresenter {
  private view: React.Component;
  
  constructor(view: React.Component) {
    this.view = view;
  }
  
  onProductPress(product: Product) {
    this.view.setState({ selectedProduct: product });
  }
}

问题分析：直接持有View实例会导致内存泄漏，破坏组件生命周期管理。

解决方案：通过回调函数传递数据，避免直接引用View实例。

2. 状态更新延迟问题

错误示例：

// 错误的异步处理
onProductPress(product: Product) {
  setTimeout(() => {
    this.setState({ selectedProduct: product });
  }, 1000);
}

问题分析：使用setTimeout会导致UI更新延迟，影响用户体验。

解决方案：使用requestAnimationFrame或React的useEffect进行异步处理。

3. 路由参数传递问题

错误示例：

// 错误的参数传递
navigation.navigate('Detail', { product: product });

问题分析：直接传递对象可能导致序列化问题。

解决方案：传递ID或唯一标识符，由接收方重新获取数据。

十、最佳实践

分层分离：严格区分Model、View、Presenter层
接口规范：定义清晰的接口规范，便于团队协作
单元测试：为Presenter层编写单元测试
代码复用：抽象通用功能，避免重复代码
文档规范：为每个模块编写文档说明

十一、总结

MVP架构在React Native中的实践需要结合框架特性进行创新设计。通过将业务逻辑封装到Presenter层，可以有效解决传统MVC模式中出现的耦合问题。本文通过一个完整的电商应用案例，展示了如何在React Native中实现MVP架构，包括：

完整的代码示例
核心原理的深入解析
实际开发中遇到的常见问题
性能优化方案
安全考虑

在实际项目中，建议：

当项目需要高度可测试性时使用MVP
当业务逻辑复杂且需要多层解耦时使用MVP
当需要快速开发小型应用时，可以考虑使用更简单的架构

同时也要注意：

不要在简单项目中过度使用MVP架构
避免Presenter层变得过于臃肿
注意与现有状态管理方案的集成

通过合理的架构设计，可以显著提升项目的可维护性、可扩展性和团队协作效率。

MVP-Demo: 一个全方位的React Native实践项目

MVP-Demo: 一个全方位的React Native实践项目

一、背景与问题

二、基本原理

三、环境准备

四、核心实现

1. 基础架构设计

2. MVP模式的View层实现

3. Presenter层实现

4. Model层实现

五、完整案例

电商应用案例：商品详情页

1. 界面设计

2. Presenter实现

3. 路由配置

六、源码解析

1. Presenter的生命周期管理

2. 事件系统实现

七、进阶使用

1. 与Redux的集成

2. 状态管理优化

八、性能与工程实践

1. 性能优化策略

2. 异常处理机制

3. 安全考虑

九、常见问题与踩坑

1. Presenter与View的耦合问题

2. 状态更新延迟问题

3. 路由参数传递问题

十、最佳实践

十一、总结

评论已关闭

推荐阅读