【Day 29】Hook 09：自定义 Hook（Custom hook）

打造自己的 Hook

自 React 16.8 以後，
使用者就可以在 React 中
创建自定义的 Hook，
将重复使用的功能模组化、
封装常用的业务逻辑，
利用其他 Hook 打造自己的 API。

关於 Custom hook

• 是一个 JavaScript function
• 拥有自己的 state
• 内部可呼叫、自行组合所有原生 Hook，甚至是另一个 Custom hook
• 必须以「use」为开头命名
  • 如果没有这个开头，React 无法知道里面包含对 Hook 的呼叫，因此无法自动检查是否有违反 Hook 的行为

自定义的 Hook 是一个遵循 Hook 规则
可重复使用的 function。

Custom hook 不包含 UI，
不需要额外创建一个 component，
Custom hook 的内部拥有独立的 state，
且可自行决定传入的参数与回传值
（或者也可以没有回传值），
并同样能够使用其他 Hook。

如果有个常用的 function，
但不需要在 DOM 上渲染任何东西，
Custom hook 会是一个很好的选择。

使用范例

【useFriendStatus.js】

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

  // ...

  return isOnline;
}

【FriendStatus.js】

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

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

【FriendListItem.js】

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

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

参考资料

• Custom Hook | 官方文件
• 【React.js入门 - 24】 Custom hook - 给我另一个超推React hook的理由

总结：

今年的铁人赛就在此完赛了，
这 30 天日更，刚好把 React 的部分结束，
（或者说.....居然才把 React 的部分写完？）
之後就再陆续把 Redux 与其他周边套件补上吧。

接触 React 到现在刚好满一年，
也成为了资历两年多的 junior engineer，
接下来也继续努力探索前端的世界罗。