aws-amplify-react 和 @aws-amplifyui-react 之间有什么区别

Java

aws-amplify-react 与 @aws-amplify/ui-react 的区别

在使用 AWS Amplify 构建前端应用程序时，我们可以选择使用 aws-amplify-react 或 @aws-amplify/ui-react 这两个库。这两个库都是为了方便开发人员与 AWS Amplify 后端进行交互而设计的，但它们在功能和用法上有一些区别。

aws-amplify-react

aws-amplify-react 是 AWS Amplify 团队提供的官方 React 组件库，它提供了一系列的 UI 组件和高级组件，用于在 React 应用程序中集成 AWS Amplify 功能。这个库包含了许多常见的组件，例如登录、注册、密码重置等，使开发人员能够轻松地构建用户身份验证和授权功能。

aws-amplify-react 提供了一套强大而灵活的组件，可以简化与 AWS Amplify 后端服务的交互。它支持与 AWS Cognito（用户认证和授权服务）、AWS AppSync（GraphQL API）、AWS S3（对象存储服务）等进行集成。开发人员可以使用这些组件来快速搭建前端应用程序，并处理与后端的数据交互。

下面是一个使用 aws-amplify-react 的示例代码，展示了如何在 React 应用程序中创建一个注册页面：

Javascript
import React from 'react';
import { withAuthenticator } from 'aws-amplify-react';
class RegisterPage extends React.Component {
  render() {
    return (
      <div>
        <h1>注册页面</h1>
        {/* 注册表单组件 */}
        <Authenticator>
          <SignUpForm />
        </Authenticator>
      </div>
    );
  }
}
export default withAuthenticator(RegisterPage);

在上面的代码中，我们首先导入 withAuthenticator 组件并将 RegisterPage 组件包装在其中。然后，在 RegisterPage 组件的 render 方法中，我们可以使用 组件来渲染一个注册表单。这样，我们就可以在 React 应用程序中轻松地添加用户注册功能。

@aws-amplify/ui-react

@aws-amplify/ui-react 是另一个由 AWS Amplify 团队提供的官方 React 组件库，它提供了一些用于构建用户界面的原子级组件。这些组件是基于 AWS Amplify 构建的，旨在与现代 UI 框架（如 React）无缝集成。

与 aws-amplify-react 不同，@aws-amplify/ui-react 不仅仅提供了用户身份验证和授权相关的组件，还提供了许多其他类型的组件，例如表单、按钮、卡片、模态框等。这些组件可以帮助开发人员更快速、更灵活地构建各种类型的用户界面。

下面是一个使用 @aws-amplify/ui-react 的示例代码，展示了如何在 React 应用程序中创建一个登录页面：

Javascript
import React from 'react';
import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components';
class LoginPage extends React.Component {
  state = {
    authState: null
  };
  componentDidMount() {
    this.unsubscribe = onAuthUIStateChange((authState) => {
      this.setState({ authState });
    });
  }
  componentWillUnmount() {
    this.unsubscribe();
  }
  render() {
    const { authState } = this.state;
    return (
      <div>
        <h1>登录页面</h1>
        {authState === AuthState.SignedIn ? (
          <div>
            
您已登录。
            <button onClick={() => Auth.signOut()}>退出</button>
          </div>
        ) : (
          <AmplifyAuthenticator />
        )}
      </div>
    );
  }
}
export default LoginPage;

在上面的代码中，我们首先导入 AuthState 和 onAuthUIStateChange 组件，并在 LoginPage 组件的 componentDidMount 方法中订阅身份验证状态的更改。然后，在 render 方法中，我们根据身份验证状态的变化来渲染不同的内容。如果用户已登录，则显示一个欢迎消息和一个退出按钮；否则，显示一个 AmplifyAuthenticator 组件，该组件提供了默认的登录和注册表单。

aws-amplify-react 和 @aws-amplify/ui-react 都是 AWS Amplify 团队提供的用于与 AWS Amplify 后端进行交互的 React 组件库。aws-amplify-react 主要关注用户身份验证和授权相关的功能，而 @aws-amplify/ui-react 则提供了更多种类的组件，用于构建各种类型的用户界面。开发人员可以根据项目需求选择适合的库来简化与 AWS Amplify 后端的集成工作。