自定义 Hook

自定义 Hook 就是一个函数，名称以use开头，函数内部可以调用其他 Hook，包括但不限于useState()、useEffect()。自定义 Hook 可以返回任何类型的值，这个值可以被其他 Hook 或者组件使用。

在两个或更多组件中使用相同的自定义 Hook，不会使 Hook 中的 State 共享。但由于自定义 Hook 本身就是函数，所以不同的 Hook 之间可以进行通讯，传递信息。自定义 Hook 中是可以使用 Hook 函数的，所以可以仿照以下示例制作一个自定义的 Hook 用于在组件之间进行通讯。

import { useState, useEffect } from 'react';

function useStatus(zoneId) {
  const [isActivated, setActivated] = useState(false);

  useEffect(() => {
    const subscription = ZoneControlApi.subscribeZoneStatus(zoneId, status => setActivated(status.isActivated));

    // 以下代码会在 React 开发者工具中显示调试信息
    useDebugValue(isActivated ? 'Activated' : 'Deactivated');

    return () => {
      subscription.unsubscribe();
    };
  });

  return isActivated;
}

// 以上自定义 Hook 可以在组件中这样使用
function BattleFieldZone(props) {
  const isActivated = useStatus(props.id);

  // 实现组件中其他的逻辑功能。
}

这里需要注意的是，在上面的示例中，虽然已经定义了自定义 Hook useStatus ，但是这个自定义 Hook 并不会在组件之间共享 State，也就是说每次调用这个 Hook，都会创建一个独立的 State。