react hooks定义数据_React复杂组件重构--6种最佳实践实现高效和高可读的组件

问题提出

前段时间换工作以来，接手了一个比较老的react的项目，但好在版本在16以上。多次迭代之后就发现有些组件设计的只是为了完成工作而已。由此，你确定你写的react组件符合最佳实践吗？或者只是为了应付工作。

一个辣鸡 ️组件看起来是什么样子的

以下是我以前写的一个tab切换组件：

import 

你会发现，简单的一个button列表组件，它只有一个功能，就是告诉你当前点击的button，却足足写了76行，但它的确是能正常运行的。让我们来改造它吧。

Step1: Hooks包装一下

然后第一次重构下来：

import 

使用hooks之后，直接把this全干掉了，class也干掉了，但还是有61行，继续优化。

Step2: 抽离小组件--可复用性

多看一眼我们要实现的东西，然后我们会发现，其实有很多是重复的，或者说是结构化的，现在把重复的抽出来。

import 

这里只是将button抽出来，结构化也更明显了，可读性稍微高了点，但看着总觉得还差点什么。

Step3: Props结构化

这里主要就做一件事，需要的props值才拿，减少冗余。

import 

其实这里的listItem是可以用map做一个结构化的，主要看Item扩展性要求高不高。

Step4: 数据驱动 vs Props结构化

我们都知道React是数据驱动的，这里是不是可以使data更结构化一点呢？这里不经意间想起了Vue的data。而且props结构化会在扩展性方面会有所欠缺，或者props要传入的参数很多，那可能就不适合用该方法。所以这里考虑下可复用性和可扩展性。

import 

经过这次重构：

• 可复用性提高
• 更简单
• 扩展性更好
• data总揽全局

Step5: 添加PropTypes类型校验

添加类型校验主要是为了避免类型传错时引起的报错。

import 

Step6: 拆分小组件（单一原则）

这里Tabs和ListItem分开两个组件文件写即可，就不贴出来了。

总结

比较以下最初的组件，我们收获了更高效和可读性更高的组件。再进一步的话我们可以为其编写单元测试用例，这个下回分解。

全文完，欢迎交流讨论。如果觉得写得还不错，那就点个赞吧。

如果转载本文，文本务必注明：“转自知乎作者：大猪蹄子研究院“