使用 ReactJS 快速开发 UI 的五大方法

在IT环境中，当团队提出一个产品创意时，他们做的第一件事就是准备文件。他们会查阅一些文档，比如可行性报告、用例、产品功能、市场调研以及其他相关方面的内容。

所有文档工作完成后，他们会要求设计师设计应用程序的UI。设计完成后，前端开发人员负责开发应用程序的UI，而后端开发人员则负责开发API。

因此，作为一名前端开发人员，让我向您介绍我牢记并亲自遵循的 5 种在 ReactJS 应用程序中更快地构建 UI 的方法，它们可能包括：

• 方法＃1分析设计
• 方法＃2 构建站点数据
• 方法#3 设置状态
• 方法＃4 集成 ESLint
• 方法＃5 集成 Storybook

方法1：分析设计，理解设计内容

在这种方法中，你必须分析设计并思考各种模式来构建应用程序的UI。我会花至少30分钟来分析和思考可以应用的不同策略和模式。我会根据以下三个方面来分析设计：

• 寻找包装器- 包装器是什么意思？包装器指children的是接受as 参数的东西props。假设我们的应用中有三个不同位置的模态框，它们的title、close icon以及margin和padding 的设计相同。为此，我会创建一个ModalWrapper组件。同样，我们可以为卡片创建一个包装器。

让我再给你举一个例子。

假设每个屏幕上都有相同的页眉和页脚，因此我们制作一个类似这样的布局包装器。

import Footer from '../Footer'
import Header from '../Header'

function Layout({ children }) {
  return (
    <div>
      <Header />
      {children}
      <Footer />
    </div>
  )
}

export default Layout

• 可重用组件- 我的第二步是，我会尽量记录下应用程序中可以重用的内容。例如，按钮、带标签的输入框、错误代码等等。记录所有可重用组件的主要目的是保持一致性，并通过避免重复编写相同的代码来节省时间。

可重用组件是通过 进行更改的组件props。（包装器也是可重用组件，但它需要子组件，所以我称之为包装器）

• 理解网格系统- 设计师使用网格构建网站。这有助于我们轻松实现网站在小型设备上的响应式布局。理解网格系统对于网站响应式设计至关重要。

为了使网站具有响应能力，我们根据场景使用flex、grid或百分比宽度来实现响应能力。

在所有其他方法中，这是唯一一个会占用我们大量时间的方法。但这是有原因的。它为整个应用程序设定了路线图，并帮助我们构建代码。

方法＃2：构建站点数据，使用虚拟数据

在构建过程中，我们经常会遇到一堆尚未准备好的UIs列表，因此为了让流程顺畅快速，我会创建一些虚拟数据，并将其放在需要的地方。同时，我会将其放在一个名为site-data的新文件夹中。dataAPIsmap

当我们集成 API 时，我们将删除里面的文件夹site-data。

但是如何管理站点数据，完全取决于您的选择！

下面是我在设计 UI 时经常遇到的示例数据（左侧）的构建站点数据文件夹的片段：

在那里创建一个类似这样的对象并将其导出。

const employess = {
  header: [
    { title: '#' },
    { title: 'Name' },
    { title: 'Email' },
    { title: 'Phone' },
  ],
  body: [
    {
      id: 1,
      name: 'John Doe',
      email: 'john@email.com',
      phone: '1234567'
    },
    {
      id: 2,
      name: 'John Doe',
      email: 'john@email.com',
      phone: '1234567'
    },
    ....
  ]
}

export { employess }

这种做法可以帮助您使您的组件干净，并为您的应用程序提供一个可以轻松管理的轻量级 CMS（如果您愿意）。

方法#3：设置状态，处理超时数据变化

因此，每当您遇到应用程序设计中必须具有交互性的部分时，尤其是使用表单、复选框、下拉菜单等，请始终尝试为它们设置一个状态，以便从用户那里获取更改的数据。

就我而言forms，我使用按钮输入console.log所有表单的值submit。当我需要集成 API 时，它真的非常实用，而且速度很快。

以下是示例：

const UserProfile = () => {
  const [userProfile, setUserProfile] = useState({
    name: '', oldPassword: '', newPassword: '', email: ''
  })

  const onChangeProfile = (e) => {
    const { name, value } = e.target
    setUserProfile({ ...userProfile, [name]: value })
  }

  const onSaveProfile = (e) => {
    e.preventDefault()
    console.log('userProfile', userProfile)
  }

  const { name, oldPassword, newPassword, email } = userProfile

  return (
    <>
      ...
    </>
  )
}

方法#4：集成 ESlint，一致性是关键

Eslint确实帮助我们保持代码的一致性。它不允许我们使用未使用的importsor variables，并强制我们在整个应用程序中保持一致性。如果使用单引号，那么我们必须在整个应用程序中对JavaScript使用单引号，对诸如and等属性使用双引号。classNameprops

大多数时候，我使用Airbnb ESlint代码约定来减少现场错误的数量，同时节省大量时间。

方法＃5：集成 Storybook，快速视觉测试

Storybook 在构建主题时非常有用。它通过修改组件的 props 和响应式特性，帮助我们独立地构建和测试组件。它还可以用于其他用途，例如维护组件库、一系列设计相同的组件、在团队内部共享以获取反馈等等。

何时使用 Storybook？

这真的取决于我们的需求和项目类型。我不会用 Storybook 来开发小型应用或只有几页屏幕的落地页。

总结…

我自己已经实际实现了这些方法，并且这些方法已被证明有助于在 ReactJS 中更快地构建 UI。

希望本文能帮助您在 ReactJS 中构建 UI。如果我分享的经验和知识对您有任何帮助，请在下方评论。