React中，定义Hook和定义普通函数有什么区别？

Question

如下是一个自定义Hook:

export const useImplementWidgets = (widgets: WidgetSchema[]): React.ReactNode => {
  const topLevelWidgets = useMemo(() => getTopLevelWidgets(widgets), [widgets]);

  return (
    <React.Fragment>
      {topLevelWidgets.map((widget) => (
        <ImplWidget key={widget.id} widget={widget} />
      ))}
    </React.Fragment>
  );
};

我发现定义Hook和定义普通的js函数对比，除了use开头的命名规范之外没有任何差异：
1、请问定义Hook和定义普通的js函数还有哪些区别吗？
2、自定义 Hook 可以调用其他的 React Hook，如 useState, useEffect 等。普通函数不能这样做。请问这个是如何实现这个约束的呢（普通函数不能这样使用，是运行时检查use开头的函数吗）？
3、使用位置：自定义 Hook 只能在 React 函数组件或其他 Hook 中调用，而不能在普通 JavaScript 函数中使用。请问这个是如何实现的呢？
4、上下文访问：自定义 Hook 可以访问 React 的上下文（如通过 useContext），普通函数则不能。请问这个是Hook和Js自定函数的差异是如何实现的呢？

或许2.3.4 是一个问题，那就是Hook能实现的功能是什么机制让它和普通js函数不能实现此功能相区别开来的。

Answer 1

1. 定义 Hook 和定义普通 JavaScript 函数没有任何区别，除了 Hook 函数的函数名需要以 use 开头
2. Hook 函数仅能在 Hook 函数或 React 函数组件中调用，这项约束需要靠开发者自己遵守，而不会在运行时检查。也可以使用 eslint 进行静态检测
3. 见 2

4. 这是因为 React 在渲染组件的时候提供了渲染上下文。例如 React 通过链表保存组件的状态信息，useState 定义组件状态时就是在操作这个链表。这个上下文通过 resolveDispatcher 获取，如果上下文为空，那么在开发模式下将打印一个警告

   export function useContext<T>(Context: ReactContext<T>): T {
     const dispatcher = resolveDispatcher();
     if (__DEV__) {
       if (Context.$$typeof === REACT_CONSUMER_TYPE) {
         console.error(
           'Calling useContext(Context.Consumer) is not supported and will cause bugs. ' +
             'Did you mean to call useContext(Context) instead?',
         );
       }
     }
     return dispatcher.useContext(Context);
   }

Answer 2

请问定义Hook和定义普通的js函数还有哪些区别吗？

Hook用于在React里封装和重用状态逻辑，能利用React的特性（生命周期管理和状态管理等）；而普通函数可以执行各种任务，与React没有直接关系。

自定义 Hook 可以调用其他的 React Hook，如 useState, useEffect 等。普通函数不能这样做。请问这个是如何实现这个约束的呢（普通函数不能这样使用，是运行时检查use开头的函数吗）？

使用位置：自定义 Hook 只能在 React 函数组件或其他 Hook 中调用，而不能在普通 JavaScript 函数中使用。请问这个是如何实现的呢？

上下文访问：自定义 Hook 可以访问 React 的上下文（如通过 useContext），普通函数则不能。请问这个是Hook和Js自定函数的差异是如何实现的呢？

因为普通函数不在React的生命周期内，不和React的生命周期交互