React 16.7.0-alpha hooks 之自定义钩子

转载于免费视频网www.rails365.net

构建本身的Hook能够将组件逻辑提取到可重用的函数中。

当咱们学习使用`Effect Hook时， 咱们从聊天应用程序中看到了这个组件，该组件显示一条消息，指示朋友是在线仍是离线：

import { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() : {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () : {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}
复制代码

如今让咱们的聊天应用程序也有一个联系人列表，咱们想要呈现绿色的在线用户名。咱们能够将上面相似的逻辑复制并粘贴到咱们的FriendListItem组件中， 但它不是很好：

import { useState, useEffect } from 'react';

function FriendListItem(props) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() : {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () : {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}> {props.friend.name} </li>
  );
}
复制代码

相反，咱们想在FriendStatus和FriendListItem之间分享这个逻辑。

传统上，在React中，咱们有两种流行的方式来共享组件之间的状态逻辑：渲染道具和高阶组件。咱们如今将看看Hook如何在不添加这些方法的状况下解 决许多相同的问题。

提取自定义钩子

当咱们想要在两个JavaScript函数之间共享逻辑时，咱们将它提取到第三个函数。组件和挂钩都是功能，因此这也适用于它们！

自定义Hook其实也是一个JavaScript函数，其名称以use开头，能够调用其余Hook。 例如，下面的useFriendStatus是咱们的第一个自定义钩子：

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() : {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () : {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}
复制代码

里面没有任何新内容 - 逻辑是从上面的组件中复制的。就像在组件中同样，确保只在自定义Hook的顶层无条件地调用其余Hook。

与React组件不一样，自定义Hook不须要具备特定签名。咱们能够决定它做为参数须要什么，以及它应该返回什么（若是有的话）。换句话说，它就像一个普通的功能。 它的名字应该始终使用use开头，这样你就能够一眼就看出钩子的规则适用于它。

咱们使用FriendStatus Hook的目的是订阅咱们朋友的状态。这就是为何它将friendID做为参数，并返回此朋友是否在线：

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);
  
  // ...

  return isOnline;
}
复制代码

使用自定义钩子

最初，咱们的目标是从FriendStatus和FriendListItem组件中删除重复的逻辑。他们俩都想知道朋友是否在线。

如今咱们已经将这个逻辑提取到useFriendStatus钩子，咱们可使用它：

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}> {props.friend.name} </li>
  );
}
复制代码

这段代码是否等同于原始示例？ 是的，他们以相同的方式工做。若是你仔细观察，你会注意到咱们没有对行为作任何改变。咱们所作的只是将两个函数之间的一些 公共代码提取到一个单独的函数中。自定义挂钩是一种天然遵循Hooks设计的约定，而不是React功能。

我是否必须以use开头命名个人自定义Hook？ 咱们但愿你作到这点。这个习惯很重要。若是没有它，咱们将没法自动检查是否 违反了Hook规则，由于咱们没法判断某个函数是否包含对 其中的Hooks的调用。

两个组件使用相同的Hook共享状态吗？ 不会。自定义挂钩是一种重用有状态逻辑的机制（例如设置订阅和记住当前值），但每次使用自定义挂钩时， 自定义挂钩的全部状态和效果都是彻底独立的。

自定义Hook如何得到隔离状态？ 每次对Hook的调用都会被隔离。由于咱们直接调用useFriendStatus，从React的角度来看， 咱们的组件只调用useState和useEffect。 正如咱们以前-所知，咱们能够在一个组件中屡次调用useState和useEffect，它们将彻底独立。

提示：在挂钩之间传递信息

因为Hooks是函数，咱们能够在它们之间传递信息。

为了说明这一点，咱们将使用咱们假设的聊天示例中的另外一个组件。这是一个聊天消息收件人选择器，显示当前所选朋友是否在线：

const friendList = [
  { id: 1, name: 'Phoebe' },
  { id: 2, name: 'Rachel' },
  { id: 3, name: 'Ross' },
];

function ChatRecipientPicker() {
  const [recipientID, setRecipientID] = useState(1);
  const isRecipientOnline = useFriendStatus(recipientID);

  return (
    <>
      <Circle color={isRecipientOnline ? 'green' : 'red'} />
      <select
        value={recipientID}
        onChange={e : setRecipientID(Number(e.target.value))}
      >
        {friendList.map(friend : (
          <option key={friend.id} value={friend.id}>
            {friend.name}
          </option>
        ))}
      </select>
    </>
  );
}
复制代码

咱们将当前选择的friend ID保留在recipientID状态变量中，若是用户在<select>选择器中选择其余朋友，则更新它。

由于useState Hook调用为咱们提供了recipientID状态变量的最新值，因此咱们能够将它做为参数传递给咱们的自定义useFriendStatus Hook：

const [recipientID, setRecipientID] = useState(1);
const isRecipientOnline = useFriendStatus(recipientID);
复制代码

这让咱们知道当前选择的朋友是否在线。若是咱们选择不一样的朋友并更新recipientID状态变量，咱们的useFriendStatus Hook将取消订阅以前选择的朋友， 并订阅新选择的朋友的状态。

使用你想象中的钩子

Custom Hooks提供了之前在React组件中没法实现的共享逻辑的灵活性。您能够编写自定义Hook，涵盖普遍的用例，如表单处理，动画，声明订阅，计时器， 以及可能还有更多咱们没有考虑过的。更重要的是，能够构建与React的内置功能同样易于使用的Hook。

尽可能抵制过早添加抽象。既然功能组件能够作得更多，那么代码库中的平均功能组件可能会变得更长。这是正常的 - 不要以为你必须当即将它分红钩子。 但咱们也鼓励你开始发现自定义Hook能够隐藏简单接口背后的复杂逻辑或帮助解开凌乱组件的状况。

例如，可能有一个复杂的组件，其中包含许多以ad-hoc方式管理的本地状态。 useState不会使更新逻辑更容易集中化，所以你可能但愿将其 编写为Redux reducer：

function todosReducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, {
        text: action.text,
        completed: false
      }];
    // ... other actions ...
    default:
      return state;
  }
}
复制代码

reducer很是便于单独测试，而且能够扩展以表达复杂的更新逻辑。若有必要，能够将它们分红更小的reducer。可是，你可能还享受使用React本地状态的好处， 或者可能不想安装其余库。

那么，若是咱们能够编写一个useReducer Hook，让咱们使用reducer管理组件的本地状态呢？它的简化版本可能以下所示：

function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  function dispatch(action) {
    const nextState = reducer(state, action);
    setState(nextState);
  }

  return [state, dispatch];
}
复制代码

如今咱们能够在咱们的组件中使用它，让reducer驱动它的状态管理：

function Todos() {
  const [todos, dispatch] = useReducer(todosReducer, []);

  function handleAddClick(text) {
    dispatch({ type: 'add', text });
  }

  // ...
}
复制代码

在复杂组件中使用reducer管理本地状态的需求很常见，咱们已经将useReducer Hook构建到React中。 你能够在Hooks API参考中找到它与其余内置Hook一块儿使用。