前端 - 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

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

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

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

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

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

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

Answer 2

1. 定义Hook和定义普通的js函数的区别

除了命名约定（Hook通常以use开头）之外，定义Hook和定义普通JavaScript函数的主要区别在于Hook只能在函数组件或另一个Hook内部被调用。这意味着Hook可以访问React的状态和其他特性（如生命周期），而普通函数则不能。此外，Hook的使用受到React框架的约束，以确保组件状态的正确性和一致性。

2. 自定义Hook可以调用其他React Hook，普通函数不能这样做

这个约束是通过React的内部实现来强制的。当React渲染一个组件时，它会维护一个内部列表来跟踪当前组件渲染过程中调用了哪些Hook。这个列表确保了在组件的多次渲染中，Hook的调用顺序和数量保持一致。如果React在渲染过程中发现Hook的调用顺序或数量与上次渲染不同，它会抛出一个错误。

普通函数无法被React的Hook调用机制识别，因此当在普通函数中尝试调用Hook时，React无法正确地管理这些Hook的调用，从而导致运行时错误。

3. 自定义Hook只能在React函数组件或其他Hook中调用

这个限制同样是由React的内部实现和渲染机制决定的。React在渲染组件时，会检查当前执行环境是否允许调用Hook。如果不在函数组件或Hook的上下文中调用Hook，React会抛出错误。这种机制确保了Hook的调用是安全和可预测的。

4. 自定义Hook可以访问React的上下文，普通函数则不能

这个差异也是由于React的上下文API和Hook机制的结合。useContext Hook允许你订阅React的上下文值，这是React提供的一种跨组件共享数据的方式。由于Hook是React的一部分，它们可以访问React的上下文API。而普通函数则没有这种特殊的集成，因此无法直接访问React的上下文。

总结

Hook和普通JavaScript函数的主要区别在于它们与React框架的集成程度。Hook是React为了解决在函数组件中使用状态和生命周期等特性而引入的，它们受到React内部机制的限制和约束，以确保组件的状态和渲染过程的一致性和安全性。这些限制和约束是通过React的渲染机制和内部实现来强制的，而不是通过简单的运行时检查。