[React Hooks 翻译] 6-8 自定义Hook

自定义Hook可以将一些逻辑抽离至可复用的函数里。

当我们学习使用Effect Hook时,我们写了这么个组件,该组件显示一条消息,指示朋友是在线还是离线

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

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

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

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

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    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之间复用这段逻辑。

以前我们是通过render prop和HOC解决这个问题的, 现在我们看看使用Hook是如何解决的

将复用的逻辑提取成自定义Hook

当我们想要在两个JS函数之间共享一段逻辑时,我们会将这段逻辑提取成另一个函数。因为函数组件和Hook也是函数,所以这个思想同样适用于它们两个。

**自定义Hook是一个JavaScript函数,其名称以“use”开头,可以调用其他Hook。**例如,下面的useFriendStatus是我们的第一个自定义Hook:

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

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

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}
复制代码

这里面没有任何新内容。 逻辑是从上面的组件中复制出来的。和在组件中使用Hook一样,确保只在自定义Hook的顶层无条件地调用其他Hook。

与React组件不同,自定义Hook不需要具有特定签名(specific signature)。我们可以决定它作为参数需要什么,以及它应该返回什么(如果有的话)。换句话说,它就像一个普通函数一样。它的名称应该始终以use开头,以便您可以一眼就看出这是一个钩子,然后应用 钩子的那2条规则

FriendStatus Hook的功能是订阅friend的状态。它将friendID作为参数,并返回此朋友是否在线

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

  // ...

  return isOnline;
}
复制代码

下面看看怎么用

使用自定义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>
  );
}
复制代码
  • 这段代码是否等同于最开始的例子?
    • 是的
    • 自定义Hook是自然遵循Hooks设计的一种约定(convention ),而不是React的特性(feature)。
  • 非得要以use开头命名自定义Hook吗?
    • 是的
    • 这个约定很重要。不这么做我们就将无法自动检查是否违反了Hook规则,因为我们无法判断某个函数是否包含对其中的Hooks的调用
  • 使用相同Hook的2个组件共享state吗?
    • 不共享
    • 自定义Hook只复用逻辑而不共享状态。所有状态和副作用完全相互独立
  • 自定义Hook的状态是如何独立的呢?
    • 每一个对Hook的调用都会得到独立的状态。因为我们是直接调用useFriendStatus 的,所以从React的视角来看组件不过是调用了useState and useEffect而已。经过前面的学习我们已经知道,在一个组件中多次调用useState和useEffect,它们是完全独立的。

Tip:在Hook直接传递信息

Hook是函数,是函数就可以在它们之间传递信息。

下面我再写一个组件,这个组件是一个聊天信息的接收人选择器,用来展示当前friend是否在线

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()

( PS:这里React玩了个谐音梗,useYourImagination 意思是放飞你的想象力,React希望开发者放飞想象力开发更多好用的Hook,然后useYourImagination恰好是以use开头的,从React的角度看,这个标题就是一个Hook,所以加个括号去执行这个Hook,于是大家就都能放飞想象力了 )

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

不要过早地添加抽象逻辑。既然现在函数组件能干的事更多了,那么函数组件写的更长也是正常的,所以不要觉得非得现在就把它们分散到各个Hook里去不可。但是我们也鼓励你现在就开始思考如何使用自定义Hook去把复杂的逻辑隐藏在简单的接口之下,或者梳理逻辑混乱的组件。

比如说,你有一个复杂的组件,包含了大量的以ad-hoc的方式管理的local state(ad-hoc:zh.wikipedia.org/wiki/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;
  }
}
复制代码

Reducers非常便于单独测试,并且可以扩展以表达复杂的更新逻辑,也可以将它们分成更小的reducer,但是很可能于此同时你又想享受React本地状态带来的便利,又不想引入其他的库,所以怎么办呢?

这样的话,我们能写一个useReducer Hook,让我们用reducer管理本地状态?一个简化版的useReducer可能长这样:

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

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

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

现在可以在组件中使用useReducer,让reducer驱动状态管理

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

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

  // ...
}
复制代码

在复杂组件中使用reducer管理本地状态的需求很常见,我们已经将useReducer Hook构建到React中。您可以在Hooks API参考中找到它与其他内置Hook一起使用。

转载于:https://juejin.im/post/5cea5b39f265da1b5f2631fc

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值