更好编写 React 组件的小窍门

React 是一个声明式和基于组件的库,它只处理一件事,即UI。React 目前已经改良了很多,其中每个新增功能都相应地比之前版本更加完善,函数组件比基于类的组件更受欢迎,我们鼓励用 React Context 代替 Redux 进行状态管理。在本文中,我们将看到一些小众的操作,它们有助于将 React 组件变得更加整洁。

Flags

我们经常在isLoadingisSuccesshasError 等这类组件中使用Flags来处理函数。所以它们有什么错误呢?详见以下示例:

你看出错误了吗?那就是为调用一个 API 同时需要管理多个flags。这个例子很简单,尽管只调用一个 API ,却在每个效果中三个Flags都要被重置。但是有了这 3 个单数,当这些选项可能不会一起改变或一起重置时,我就必须在现实场景中处理多个选项。因此,在这种情况下,你必须使用这些标志的组合来了解组件的当前状态或完成某些功能,这会使我们的代码更加混乱。

//when its not loading and is success
if (!isLoading && isSuccess) {}
//when its not loading and has error
if (!isLoading && hasError) {}

现在要是换个角度看,在某一时刻,组件只有一种状态,loadingsuccesserror 的其中一个。

现在让我们看一个更好的版本:

多个单数的管理已减少到单个,status 和代码变得更清晰、更具可读性。而在现实中,你不必担心检查多个Flags以确定组件的最终状态或实现某些功能。

使用效果

我们在函数组件中使用useEffect Hook来应对副作用。理想情况下,一个组件应该只做一件事, 但现实不同。看以下示例:

1_G-ZFlZfdZN_y8bYJoDZsOw

我试图从现实的场景中捕捉一些复杂性:P。正如你所看到的问题,在一次useEffect 调用中完成了多项操作。虽然它是可读的,却不容易理解和管理。我没有提到依赖关系,但你可以猜到,提及依赖关系数组中所有可能的依赖关系会变得很糟糕。在现实中,随着越来越多的需求出现,它会随着时间的推移变得更加混乱。理想情况下,最好的方法是单个组件只做一件事。相应地,我们将在组件中的 useEffect 中也只做一件事。那么我们如何才能使它更易于管理和理解呢?让我们来看看它的一个更好的版本:

是的,你猜对了。在useEffect 中实施单一职责原则。如果你不能让组件只做一件事,至少让useEffect 只做一件事。对于每个新产生的副作用,使用新 useEffect 。在以上例子中,虽然组件有更多的代码,但我明白,useEffect 只是做一件事情,只有blahblah 是其依赖关系。如果在某个时间点,你想在组件中删除/添加一个新效果,只需删除/添加它的useEffect 就可以。

何时使用单独的 Component 或 Hook

如果一个组件正做不止一件事,那么就该对其进行拆分了。如果一个东西在多个地方被使用,那么是时候让它成为一个独立的实体。如果涉及 UI,可以制作一个单独的组件,如果它只是逻辑/副作用,制作一个单独的Hook就可以了。

内容就讲到这里,这些观点都是我的经验之谈。如有疑问,欢迎评论,希望我们能共同进步。

原文作者 Mukarram Ishaq
原文链接 https://medium.com/geekculture/untold-practices-to-write-better-react-components-5593122802ec