组件和样式 | 众里千寻

今天我们来聊聊项目中开发组件的一些优秀实践，同时也介绍一些优秀的组件库和样式库。

组件开发最佳实践

把代码都收敛在使用它的地方

将组件、函数、样式、状态等都尽可能的收敛在使用这些代码的地方。不要放到其他地方引起混乱。

比如组件的样式代码应该与组件代码放到一个目录下，而不是放到一个其他的样式目录中去。

避免嵌套的渲染函数

// 当组件功能越来越复杂的时候，这种方式会让组件越来越难以维护
function Component() {
  function renderItems() {
    return <ul>...</ul>;
  }
  return <div>{renderItems()}</div>;
}

// 可以将其抽成独立组件
import { Items } from 'components/Items';

function Component() {
  return (
    <div>
      <Items />
    </div>
  );
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

保持风格统一

保持编码风格统一。比如组件的命名是驼峰式，则其他地方也是用驼峰式命名。如果是用箭头函数来创建组件，则其他地方也保持一致。

限制组件的 props 数量

如果组件需要接收的 props 太多，我们应该考虑将其拆分成多个组件，或者是用 children 或者插槽等方式来组合功能。

这里是一个如何使用组合的代码样例open in new window

对公共组件进行一定程度的抽象

对于大项目来说，对公共组件进行抽象是一个必要的组件开发方式。经过抽象后的组件可以让应用代码更利于维护。不过，在对组件进行抽象之前，需要明确哪些代码是重复的，以避免错误的抽象。

这里是一个对组件进行抽象的代码样例open in new window

除了抽象组件以外，我们也要对一些依赖的第三方库进行必要的包装，让其能更好的适配应用的需要。比如对 axios 库进行一些包装，来让应用使用 axios 时更加简便。这么做也能保障后续对三方库进行修改或者替换三方库的时候对应用影响最小。

这里是一个封装第三方库的代码样例open in new window

组件库

通常我们在开发应用的时候都需要一些组件库来辅助开发。这里有一些社区里久经考验的组件库可以参考。

功能齐全的组件库

Chakra UIopen in new window 非常灵活，可以帮助快速开发产品原型，同时具有良好的可访问特性。
AntDopen in new window 组件非常丰富，非常适合用来开发后台管理系统。
Material UIopen in new window 也是一款适合用来开发后台管理系统的组件库，组件丰富。

无头组件库

有时候我们需要自由的定制组件样式，同时也要完备的组件功能，那么可以试试无头组件库。所谓无头组件就是只有交互功能，没有样式的组件。样式需要开发者自己开发。

样式库

我们有很多种方案来给组件添加样式，下面这几个是比较优秀的社区方案：

样式与组件的组合

下面这几个组合是经过社区实践后证明的比较好的组合方案。

使用 Storybook 开发组件

Storybookopen in new window 是一款非常优秀的组件开发工具。我们可以将其当做应用内组件的目录，当应用规模比较大的时候，使用 Storybook 可以非常方面的查看组件信息。

这里是使用 Storybook 的代码样例open in new window

关注微信公众号，获取最新推送~

加微信，深入交流~

# 组件开发最佳实践

# 把代码都收敛在使用它的地方

# 避免嵌套的渲染函数

# 保持风格统一

# 限制组件的 props 数量

# 对公共组件进行一定程度的抽象

# 组件库

# 功能齐全的组件库

# 无头组件库

# 样式库

# 样式与组件的组合

# 使用 Storybook 开发组件