JavaScript / 前端 / 译文 · 10月 7, 2020 0

React v16.8.x – 建立自己的hooks

建立自己的hooks,可以让你把组件逻辑提取到可复用的函数内。

看看在学习effect时我们举的订阅朋友状态的例子:

import React, { 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 React, { 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>
  );
}

相反,我们想在FriendStatusFriendListItem之间分享这个逻辑。

在React中,我们有两种流行的方式来共享组件之间的状态逻辑:props和高阶组件。我们现在将看看Hook如何在不强迫您向树中添加更多组件的情况下解决许多相同的问题。


提取一个自定义hooks

我们想在两个JS函数之间共享逻辑时,可以提取到第三个函数内。组件和hooks都是函数,所以我们也可以这么做:

import React, { useState, useEffect } from 'react';

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;
}

没有什么新的技巧,逻辑就是从上面复制下来的。就像在组件内,你也必须遵循hooks的两条铁律。

与真正的组件不同,自定义hooks不需要有特定的签名。们可以决定它作为参数需要什么,以及它应该返回什么(如果有的话)。换句话说,它就像一个普通的函数一样。它的名称应该始终以use开头,以便您可以一眼就看出他是hooks。

我们使用FriendStatus Hook的目的是订阅我们朋友的状态。所以它将friendID作为参数,并返回此朋友是否在线:

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

  // ...

  return isOnline;
}

接下来我们看看如何使用它:

使用自定义hooks

首先,我们的目标是从FriendStatusFriendListItem组件中删除重复的逻辑。他们俩都想知道朋友是否在线。

现在我们已经将这个逻辑提取到useFriendStatus hook,我们可以使用它:

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是一种自然遵循Hooks设计的约定,而不是React功能。

我是否必须以use开头命名我的自定义Hook? 请这样做。这个习惯非常重要。没有它,我们将无法自动检查是否违反了Hook规则,因为我们无法判断某个函数是否包含对Hooks的调用。

两个组件使用相同的Hook共享状态?不是的。 hook是重用有状态逻辑的机制(例如设置订阅并记住当前值),但每次使用自定义Hook时,其中的所有状态和effect都是完全隔离的。

自定义Hook如何获得隔离状态? 每次对Hook的调用都会得到一个隔离的状态。因为我们直接调用useFriendStatus,从React的角度来看,我们的组件只调用useStateuseEffect。正如我们之前所知道的,我们可以在一个组件中多次调用useStateuseEffect,它们将完全独立。

Tip:在hooks之间传递信息

由于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>
    </>
  );
}

我们将当前选择的朋友ID保留在recipientID状态变量中,如果用户在<select>选择器中选择其他朋友,则更新它。

因为useState Hook调用为我们提供recipientID状态变量的最新值,所以我们可以将它作为参数传递给我们的自定义useFriendStatus Hook

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

这让我们知道当前选择的朋友是否在线。如果我们选择不同的朋友并更新recipientID状态变量,我们的useFriendStatus Hook将取消订阅之前选择的朋友,并订阅新选择的朋友的状态。

useYourImagination()

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

尽量不要过早地添加抽象。既然函数组件可以做得更多,那么代码库中的平均函数组件可能会变得更长。这是正常的 —— 不要觉得你必须立即将它分成hooks。但我们也鼓励您开始发现自定义Hook可以隐藏简单接口背后的复杂逻辑或帮助解开混论组件的情况。

例如,您可能有一个复杂的组件,其中包含以临时方式管理的大量本地状态。useState不会使更新逻辑集中化,因此您可能希望将其编写为Redux reducer

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

Reducers非常便于单独测试,并且可以扩展来实现复杂的更新逻辑。如有必要,您可以将它们分成更小的Reducers。但是,您可能还享受使用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中。

冀ICP备19028007号