@tarojs/components 和 taro-ui 中的组件之间的区别

1. 来源与用途：

• @tarojs/components：Taro 官方提供的基础组件库，包含了微信小程序、H5 等不同平台的通用组件（如 View, Input, Button, Form 等）。这些组件是跨平台的，并提供了与微信小程序等平台原生组件类似的 API。
• taro-ui：Taro 官方的 UI 组件库，基于 Taro 框架的设计，提供了更高级的 UI 组件，如 AtForm, AtInput, AtButton, AtInputNumber 等。这些组件通常具有更好的样式和更丰富的功能，适用于快速开发界面。

2. 功能与样式：

• @tarojs/components：
  • 基础组件，样式较为简单，通常需要手动添加样式或进行二次开发。
  • 这些组件与微信小程序的原生组件类似，如 Form, Input, Button，用于构建基础的表单或按钮功能。
  • 没有额外的样式或动画，需要自行设计。
• taro-ui：
  • 高级 UI 组件，自带样式，开箱即用，并且提供了更多高级功能。例如：
    • AtInput 提供了输入框的样式和交互，内置的 onChange 方法处理。
    • AtForm 提供表单提交、重置的逻辑，并且与 AtButton 等搭配使用时，样式更加统一。
    • AtButton 提供了定制化的按钮样式，且支持多种样式，如带图标、颜色变化等。
  • 这些组件基于 @tarojs/components 进行封装，提供更丰富的 UI 和交互逻辑。
  • 适合希望快速搭建漂亮 UI 的场景。

3. 使用上的区别：

5. 第三方依赖：

总结来说，taro-ui 提供了更加高级和样式丰富的组件，适合快速搭建复杂界面，而 @tarojs/components 提供了基础组件，灵活性更高但需要手动管理样式和功能。

• @tarojs/components 的表单和按钮：

• import { Form, Input, Button } from '@tarojs/components';
  
  const MyComponent = () => (
    <Form onSubmit={() => console.log('Submitted')}>
      <Input name="name" placeholder="请输入名字" />
      <Button formType="submit">提交</Button>
    </Form>
  );
  

  taro-ui 的表单和按钮：

• import { AtForm, AtInput, AtButton } from 'taro-ui';
  
  const MyComponent = () => (
    <AtForm onSubmit={() => console.log('Submitted')}>
      <AtInput name="name" placeholder="请输入名字" />
      <AtButton formType="submit">提交</AtButton>
    </AtForm>
  );
  

  4. 选择何时使用：

• @tarojs/components：适合希望自己编写样式、对 UI 进行细粒度控制的场景，或者开发简单的、小型项目。
• taro-ui：适合需要快速开发界面、希望获得一致性 UI 风格的场景。它提供了内置的样式和交互，适合中大型项目或对视觉效果有较高要求的项目。
• 使用 taro-ui 时，需要引入它的样式文件，如 import "taro-ui/dist/style/index.scss"，而 @tarojs/components 不需要引入额外样式，直接使用。