如何巧妙编写简洁的React组件成为长尾关键词？

本文共计2296个文字，预计阅读时间需要10分钟。

原文来源：翻译文章《编写清晰React组件的简单技巧》，原文作者：Iskander Samatov。在这篇文章中，我们将回顾一些简单的技巧，它们将帮助我们编写更简洁、更易于扩展的React组件。

本文源于翻译文章 Simple tips for writing clean React components, 原文作者 Iskander Samatov

在这篇文章中，我们会回顾一些简单的技巧，它们将帮助我们编写更简洁的 React 组件，并且更好地扩展我们的项目。

避免使用扩展操作符传递 props

首先，让我们从一个应该避免的反模式开始。除非有明确的理由这样做，否则应该避免在组件树中使用扩展操作符传递props，比如：{ ...props }。

通过这种方式传递 props 确实可以更快的编写组件。但这也使得我们很难去定位代码中的 bug。会使我们对编写的组件失去信心，会使得我们重构组件变得更加困难，而且可能会导致出现很难排查的 bug。

将函数参数封装成一个对象

如果函数接收多个参数，最好将它们封装成一个对象。举个例子：

export const sampleFunction = ({ param1, param2, param3 }) => { console.log({ param1, param2, param3 }); }

以这种方式编写函数签名有几个显著的优点：

1. 你不用再担心参数传递的顺序。我曾犯过几次因函数传参顺序问题而产生了 bug 的错误。