React 函数式编程代码规范
在React组件中编写代码时，遵循一定的编码规范可以提高代码的可读性和可维护性。虽然React 官方没有明确指定hooks的顺序规范，但社区中普遍采用的一种约定是将hooks按照它们的作用和相关性进行排序。
以下是一个推荐的hooks排序规范，你可以根据此规范来组织你的代码：
useState- 状态钩子，用于定义本地状态。useEffect- 副作用钩子，用于处理组件的副作用，如数据获取、订阅、手动更改 DOM 等。useContext- 上下文钩子，用于访问 React 上下文。useReducer- 状态管理钩子，用于复杂的状态逻辑管理。useCallback- 回调钩子，用于记忆回调函数，避免不必要的重新渲染。useMemo- 记忆钩子，用于记忆计算结果，避免不必要的重新计算。useRef- 引用钩子，用于持久化保存对 DOM 节点或其他数据的引用。- 自定义hooks - 将自定义hooks按照它们的功能和上面列出的hooks进行相应的排序。
通常，自定义hooks可能包含上述所有种类的hooks，所以将它们放在最后，或者是在相关联的标准hooks之后。然而，如果自定义hooks是用于定义组件状态，那么它们应该放在useState之后且在其他副作用hooks之前。这样做是为了保证在执行副作用之前，所有的状态都已经设置好了。
例如，以下是一个组件的示例代码：
1import React, { useState, useEffect, useContext, useCallback } from 'react';
2import { MyContext } from './MyContext';
3import useCustomHook from './useCustomHook';
4
5function MyComponent(props) {
6 // State
7 const [state1, setState1] = useState(null);
8 const [state2, setState2] = useState(null);
9
10 // 自定义hooks，如果它们与状态相关，放在这里
11 const customState = useCustomHook();
12
13 // 上下文
14 const contextValue = useContext(MyContext);
15
16 // 副作用
17 useEffect(() => {
18 // 做一些副作用相关的工作，比如数据获取
19 }, []); // 空依赖数组代表此effect只在组件挂载时执行一次
20
21 // 回调
22 const memoizedCallback = useCallback(() => {
23 // 处理一些事情，可能依赖于state或props
24 }, [state1, props]);
25
26 // 渲染逻辑...
27}
在这个例子中，useState 用于定义状态，useCustomHook（自定义hook）用于获取或管理自定义的状态或逻辑，它紧跟在状态定义的后面。然后是useContext 和 useEffect 等。这样的排序规则可以帮助团队成员更快地了解代码的逻辑和结构，从而提高开发效率。
