基于组件的架构模式，或许是现在重展示、重交互应用的最好选择

拆组件要准守一个原则，单一责任原则。

这也是 React 官方倡导的原则，这个原则的意思是每个组件都应该只有一个单一的功能，并且这个组件和其他组件没有相互依赖。当然，完全没有相互依赖是不可能的，但这种思路具有很高的指导价值，一个组件的依赖越少，设计得越好。

例子，一个组件你引用的依赖越多，这些依赖就像陌生的英语单词，你得去其他文件中去查词典，才能知道这些依赖的意思。依赖越多，越难读懂，也越难维护。因此，为了可读性、可维护性、可测试性，就要减少组件的外部依赖，这就是单一责任原则的指导价值。

原生（宿主）组件：生产基础视图的工厂

React Native 中文网：原生组件

在 React Native 中那些最基础、不可再拆的视图材料，大都是由 React Native 框架提供的宿主视图。

而生产宿主视图的工厂，就是宿主组件（Host Components）。这些宿主组件通常是 React Native 框架提供的组件，它们和你用 JavaScript 自定义的组件不同，宿主组件是直接由 iOS/Android 原生平台实现的。

宿主组件上层是 JavaScript 部分，底层是 Native 部分，这两部分是通过 React Native 框架联系起来的。也就是说，你调用宿主组件时，底层直接渲染的是 Native 视图。

复合组件：纯 JavaScript 函数

要创建自定义的宿主组件，你必须写 Native 代码。

但你可以直接用 JavaScript 创建，不用写 Native 代码，这类组件也叫复合组件（Composite Components）。这些复合组件是基于宿主组件或其他复合组件搭建而成的。

export default function Product({product = {name: '苹果', price: '1元'} }) {
  return (
    <View style={{flexDirection: 'row', marginTop: 5}}>
      <Text style={{flex: 1}}>{product.name}</Text>
      <Text style={{width: 50}}>{product.price}</Text>
    </View>
  );
}

自定义复合组件就是一个纯粹的 JavaScript 函数，谁调用它，谁就可以给它传入参数，同样它调用谁，它就可以给谁传入参数，而 JSX 闭合标签就是调用函数的语法糖。

搭建 React Native 静态页面的核心就是搭建组件。它的整体思路是，从上往下拆出组件，从下往上把拆出来的组件进行逐一实现和拼装。宿主组件是最基础的材料，所有我们自定义的复合组件都基于宿主组件搭建出来的，而复合组件又能搭建出更上层的复合组件，这样一步一步，我们才能把静态页面搭建完成。

示例demo：