React 是一个声明式和基于组件的库，它只处理一件事，即UI。React 目前已经改良了很多，其中每个新增功能都相应地比之前版本更加完善，函数组件比基于类的组件更受欢迎，我们鼓励用 React Context 代替 Redux 进行状态管理。在本文中，我们将看到一些小众的操作，它们有助于将 React 组件变得更加整洁。
Flags
我们经常在isLoading 、isSuccess 或hasError 等这类组件中使用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) {}
现在要是换个角度看，在某一时刻，组件只有一种状态，loading 、success 或error 的其中一个。
现在让我们看一个更好的版本：
多个单数的管理已减少到单个，status 和代码变得更清晰、更具可读性。而在现实中，你不必担心检查多个Flags以确定组件的最终状态或实现某些功能。
使用效果
我们在函数组件中使用useEffect Hook来应对副作用。理想情况下，一个组件应该只做一件事, 但现实不同。看以下示例：
我试图从现实的场景中捕捉一些复杂性：P。正如你所看到的问题，在一次useEffect 调用中完成了多项操作。虽然它是可读的，却不容易理解和管理。我没有提到依赖关系，但你可以猜到，提及依赖关系数组中所有可能的依赖关系会变得很糟糕。在现实中，随着越来越多的需求出现，它会随着时间的推移变得更加混乱。理想情况下，最好的方法是单个组件只做一件事。相应地，我们将在组件中的 useEffect 中也只做一件事。那么我们如何才能使它更易于管理和理解呢？让我们来看看它的一个更好的版本：
是的，你猜对了。在useEffect 中实施单一职责原则。如果你不能让组件只做一件事，至少让useEffect 只做一件事。对于每个新产生的副作用，使用新 useEffect 。在以上例子中，虽然组件有更多的代码，但我明白，useEffect 只是做一件事情，只有blah 和blah 是其依赖关系。如果在某个时间点，你想在组件中删除/添加一个新效果，只需删除/添加它的useEffect 就可以。
何时使用单独的 Component 或 Hook
如果一个组件正做不止一件事，那么就该对其进行拆分了。如果一个东西在多个地方被使用，那么是时候让它成为一个独立的实体。如果涉及 UI，可以制作一个单独的组件，如果它只是逻辑/副作用，制作一个单独的Hook就可以了。
内容就讲到这里，这些观点都是我的经验之谈。如有疑问，欢迎评论，希望我们能共同进步。
原文作者 Mukarram Ishaq
原文链接 https://medium.com/geekculture/untold-practices-to-write-better-react-components-5593122802ec
6666