React Native 全栈开发实战班 - 项目最佳实践之架构设计

在 React Native 项目开发中，架构设计 是决定项目可维护性、可扩展性和开发效率的关键环节。良好的架构设计可以帮助团队更好地组织代码、分离关注点、提高代码复用性，并应对不断变化的需求。本章节将介绍 React Native 项目中常见的架构设计模式，包括组件化设计、状态管理、代码分层以及模块化架构。

1.1 组件化设计

组件化设计 是 React 生态系统中的核心思想之一。通过将 UI 拆分为可复用的组件，可以提高代码的可维护性和复用性。

1.1.1 组件分类

在 React Native 项目中，组件可以分为以下几类：

展示组件（Presentational Components）：

负责 UI 的展示和渲染。
不依赖外部数据源，只通过 props 接收数据。
不包含业务逻辑。

示例：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Button = ({ title, onPress }) => {
  return (
    <View style={styles.button}>
      <Text style={styles.text} onPress={onPress}>{title}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  button: {
    padding: 10,
    backgroundColor: '#007bff',
    borderRadius: 5,
  },
  text: {
    color: '#fff',
    textAlign: 'center',
  },
});

export default Button;

容器组件（Container Components）：

负责管理数据、状态和业务逻辑。
通过 props 将数据和事件处理函数传递给展示组件。

示例：

import React, { useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import Button from './Button';

const CounterContainer = () => {
  const [count, setCount] = useState(0);

  const handlePress = () => {
    setCount(count + 1);
  };

  return (
    <View style={styles.container}>
      <Button title="Press Me" onPress={handlePress} />
      <Text style={styles.text}>Count: {count}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    marginTop: 10,
    fontSize: 18,
  },
});

export default CounterContainer;

高阶组件（Higher-Order Components, HOC）：

接收一个组件作为参数，返回一个新的组件。
用于复用组件逻辑。

示例：

import React from 'react';

const withLogger = (WrappedComponent) => {
  return (props) => {
    console.log('Component:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
};

export default withLogger;

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import withLogger from './withLogger';

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text>Hello, World!</Text>
    </View>
  );
};

export default withLogger(MyComponent);

自定义 Hooks:

用于复用状态逻辑。
可以将组件中的状态逻辑提取到自定义 Hook 中。

示例：

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((json) => {
        setData(json);
        setLoading(false);
      })
      .catch((err) => {
        setError(err);
        setLoading(false);
      });
  }, [url]);

  return { data, loading, error };
};

export default useFetch;

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import useFetch from './useFetch';

const DataFetcher = () => {
  const { data, loading, error } = useFetch('https://jsonplaceholder.typicode.com/posts/1');

  if (loading) return <Text>Loading...</Text>;
  if (error) return <Text>Error: {error.message}</Text>;

  return (
    <View style={styles.container}>
      <Text>{data.title}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
});

export default DataFetcher;

1.1.2 组件命名规范

文件夹命名: 使用小写字母，单词之间用连字符 - 连接，例如 my-component.
文件命名: 使用 PascalCase，例如 MyComponent.js.
组件命名: 使用 PascalCase，例如 MyComponent.
Props 命名: 使用 camelCase，例如 onPress.

1.1.3 组件结构

文件夹结构: 按功能模块组织组件，例如 src/components/Button, src/components/Header, src/components/Form.
文件结构: 每个组件包含一个 .js 文件和一个 .styles.js 文件，例如 Button.js, Button.styles.js.

1.2 状态管理

在 React Native 项目中，状态管理 是管理应用状态和数据流的核心机制。合理的状态管理方案可以提高代码的可维护性和可扩展性。

1.2.1 常见状态管理方案

React Context API:
- 适用于中小型项目或特定场景下的状态管理。
- 简单易用，但不适合大型项目。
Redux:
- 适用于中大型项目。
- 提供了集中式状态管理，遵循单向数据流。
- 社区支持丰富，生态完善。
MobX:
- 适用于中大型项目。
- 使用响应式编程模型，代码简洁。
- 性能优异。
Zustand:
- 轻量级状态管理库，基于 React Hooks。
- 简单易用，性能优异。

1.2.2 选择合适的状态管理方案

项目规模: 小型项目可以使用 React Context API，大中型项目可以选择 Redux 或 MobX。
团队熟悉度: 选择团队熟悉的方案，可以提高开发效率。
功能需求: 根据项目功能需求选择合适的状态管理方案，例如是否需要时间旅行调试、是否需要异步处理等。

1.2.3 状态管理最佳实践

单一数据源: 所有状态集中存储在一个地方，避免状态碎片化。
单向数据流: 数据从状态存储流向 UI，UI 事件触发状态更新。
不可变性: 状态是不可变的，每次更新状态都会返回一个新的状态对象。
模块化: 将状态管理代码模块化，按功能模块组织状态树。

1.3 代码分层

合理的代码分层可以提高代码的可维护性和可扩展性。以下是 React Native 项目中常见的代码分层结构：

Components: 存放展示组件和容器组件。
Containers: 存放容器组件。
Navigation: 存放导航配置。
Screens: 存放页面组件。
Services: 存放 API 服务、工具函数等。
Store: 存放 Redux 或其他状态管理库的配置和状态树。
Assets: 存放图片、字体等资源文件。
Styles: 存放样式文件。

示例：

/src
  /components        // 通用 UI 组件
    /Button
      Button.js
      Button.styles.js
    /Header
      Header.js
      Header.styles.js
    /Card
      Card.js
      Card.styles.js
    ...
  /containers         // 容器组件，负责连接状态和逻辑
    /HomeContainer
      HomeContainer.js
      HomeContainer.styles.js
    /ProfileContainer
      ProfileContainer.js
      ProfileContainer.styles.js
    ...
  /screens            // 页面组件，负责页面级别的布局和导航
    /HomeScreen
      HomeScreen.js
      HomeScreen.styles.js
    /ProfileScreen
      ProfileScreen.js
      ProfileScreen.styles.js
    /SettingsScreen
      SettingsScreen.js
      SettingsScreen.styles.js
    ...
  /navigation         // 导航配置
    AppNavigator.js
    RootNavigator.js
    ...
  /services           // API 服务、数据处理、工具函数等
    api.js
    storage.js
    utils.js
    ...
  /store              // 状态管理相关代码（Redux、MobX 等）
    /reducers
      authReducer.js
      userReducer.js
      ...
    /actions
      authActions.js
      userActions.js
      ...
    /selectors
      authSelectors.js
      userSelectors.js
      ...
    store.js
  /assets             // 静态资源（图片、字体等）
    /images
      logo.png
      background.jpg
    /fonts
      Roboto-Regular.ttf
      ...
  /styles             // 全局样式和主题
    theme.js
    globalStyles.js
  App.js              // 应用入口文件