新人求关注?，博主天天日更，全年无休，您的关注是我的更新的功力～ 感谢

最近我review了我写的1000多个react组件的代码，我发现了一些react组件代码编写的需要注意的地方，今天就和大家一起分享一下我在编写易于理解和维护的组件代码的心得体会。

如何在组件内定义 React 代码顺序

下面的代码显示了一个 React 组件，其中内置hook和自定义hook的顺序不明确。

您可能认为相关代码应该紧密结合在一起，例如组件开头的memoizedValue和useEffect。

然而，我发现在 React 组件中拥有明确的顺序会更有效。也会降低大家的心智负担，同时随着代码库的增长，将相关代码紧密地保持在一起变得很困难，并且其他和你协作的同事也不太可能遵循这种风格。

正确的做法 ?

我们应该使组件具有清晰的结构，以便可以快速浏览组件的逻辑，并且也可以让其他工程师也更容易接受

推荐按照下面的顺序进行书写

• State 声明状态
• Ref 声明 Ref
• Memoized 缓存数据
• Memoized callbacks 缓存回调
• Custom hooks 自定义Hooks
• Effects 副作用
• Event handler 事件处理程序
• JSX 模板

当然，这只是一般我的一些习惯。这种方式组织代码可能在有些场景并不合适。例如，您可能需要自定义 hooks的结果作为 Memoized 的依赖项。

当我们遇到这样的场景时，应该考虑将相关代码提取到自己的自定义的 hook中。

何时使用自定义 Hook

不推荐的做法

我经常看到组件有数百行代码，而且所有东西都挤在一起。如果这个组件不是你写的，则很难理解这个组件里面的具体逻辑发生了什么。

看看下面的组件。它有一个依赖于useMemo、useEffect ，并且所有代码都在组件中，因此很难快速理解代码的含义。

推荐的做法 ?

根据 React 官方文档的建议：

每当我们编写 Effect 时，请考虑将其包装在自定义 Hook 中是否会更清晰。

看一下下面的组件，我们将 useEffect 和依赖的 useMemo提取到自定义 hook 中：

上面的示例很简单，但随着前端应用程序的扩展，您将遇到发生更多事情的组件。使用自定义hook来封装逻辑可以帮助保持组件干净且易于理解。

就我个人而言，我会在以下情况下编写自定义 hook：

• 组件中存在几个相互依赖的状态数据或回调。这些可以提取到一个钩子中。
• 组件中有一个useEffect。通过将 useEffect 及其依赖项放入 hook中 ，我可以给它一个更具声明性的名称，使代码更易于理解
• 数据获取逻辑
• 重复的逻辑

所以，总结就是：将相关代码放入自定义 hook 中，并给这个hook一个语义化性的名称。

虽然这些都是一一些简单的建议，但在写了1000个 React 组件之后踩过无数的坑之后，我可以向您保证，遵循这种代码的写法会让你心智负担降低同时也让组件更加可维护。

小结

如果您有疑问或者其他问题，欢迎留言评论，大家一起探讨，一起进步～ 欢迎点赞、关注?、转发～