是否有一个正确的方法来放置React Hooks内部功能组件?

Question

所以我想问的是，是否有一些关于编写带有钩子的react功能组件的风格指南。有时我使用包含不同类型钩子的组件:

• 简单的React钩子，如:useMemo, useCallback，…
• 项目自定义React钩子，如:useCategory, useProducts，…
• 第三方React钩子，如:useRouter, useMediaQuery，…

示例(这不是我的实际代码示例，只是为了理解):

import React, { useMemo, useEffect, useCallback } from "react";
import { useRouter } from "next/router";
import { useMediaQuery } from "react-responsive";
import { useCategory, useProducts} from "@hooks";
export const Category: React.FC<CategoryProps> = () => {
const foo = useMemo(() => (
// some logic here..
), []);
const { query } = useRouter();
const { category, loading: categoryLoading } = useCategory(query.slug);
const isDesktop = useMediaQuery({ query: "(min-width: 1280px)" });
const handleFoo = useCallback(() => {
// some logic here...
}, []);
const { products, loading: productsLoading } = useProducts(category.id);
useEffect(() => {
// some logic here...
}, []);

return (<h1>Some big template here...</h1>);
}

我正在努力寻找一些关于如何在组件中放置(排序)钩子的信息。几个问题:

• 第三方钩子应该在组件函数体的开始处运行，还是应该在最后运行?
useMemo钩子应该在useEffect/useCallback钩子之上吗?
• 我应该在哪里放置项目自定义钩子?

我知道这个问题的简单答案只是为了保持一致，但我想知道，react社区是怎么想的，你是如何用钩子编写功能组件的?

Answer 1

在浏览了React文档之后，我发现了一些关于钩子的规则:https://reactjs.org/docs/hooks-rules.html#:~:text=Instead%2C%20always%20use%20Hooks%20at,multiple%20useState%20and%20useEffect%20calls.

还有这篇文章:https://blog.bitsrc.io/best-practices-with-react-hooks-69d7e4af69a7

第二篇文章给出了React Hooks的最佳实践列表。

1)。基于类的组件对您正在使用的所有生命周期方法具有更结构化的顺序(componentDidMount等)。

2)。当涉及到功能组件时，顺序/结构实际上没有被强制执行。摘自文章:

建议先用useState钩子声明状态变量，然后用useEffect钩子写订阅，然后再写与组件作业相关的任何函数。最后，返回要由浏览器呈现的元素…

换句话说，作为一个开发人员，你认为有意义的东西可能是对的。如果这是一个你和其他开发人员一起做的项目。根据您的工作开发编码类型标准可能是一个好主意。

让我知道这是否回答了你的问题:)