如何自定义 Hook_前端培训

自定义 Hook

传统上使用 HOC 或 render props 的写法实现逻辑共享；而定义自己的 Hook，可以将组件中的逻辑抽取到可服用的函数中去。

比如将之前例子中的 isOnline 状态值逻辑抽取出来：

在组件中调用：

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 函数的参数是自由定义的

因为只是个纯函数，所以不同组件都可以各自调用

使用 use  前缀不是硬性要求，但确实是推荐使用的约定

不同组件只共享状态逻辑，而不共享任何状态。