react.js - 为何react hook 无法在组件外使用?

Question

是否可以在全局做点工作,让hook可以在组件外的js 中使用?

Answer 1

很简单，视情况而定：

• 如果你的自定义 hook 中包含 react 相关api，在“组件外的js中”则不能使用，即 hook 只能在react@^16.8.0 语境中使用；
• 否则，自定义 hook 也是一个函数，可以当作一个正常的函数调用

Answer 2

React Hooks 不能在组件外部使用的原因是它们是 React 组件的一部分。它们被设计为在组件内部使用，以便在组件的生命周期的不同阶段执行特定的操作。

React Hooks 提供了一种在组件内部使用状态和其他 React 特性的方式，而无需创建和管理额外的函数。它们是为 React 组件设计的，而不是独立的 JavaScript 代码。

如果你希望在组件外部使用某些功能，可以考虑将它们提取到独立的 JavaScript 函数中，然后在组件内部和需要的地方调用这些函数。

虽然不能直接让 Hooks 在组件外部使用，但你可以通过封装 Hooks 和相关逻辑来创建可重用的函数或模块，以便在多个组件之间共享。这样可以在全局范围内使用 Hooks 的功能，而无需将它们直接放置在组件外部。

例如，你可以创建一个名为 useSharedHook 的自定义 Hook，该 Hook 可以被多个组件调用：

// useSharedHook.jsimport { useState } from 'react';export default function useSharedHook() {  const [count, setCount] = useState(0);  const increment = () => {    setCount(count + 1);  };  return { count, increment };}

然后在你的组件中使用这个自定义 Hook：

// MyComponent.jsimport React from 'react';import useSharedHook from './useSharedHook';function MyComponent() {  const { count, increment } = useSharedHook();  return (    <div>      <p>Count: {count}</p>      <button onClick={increment}>Increment</button>    </div>  );}