自定义 Hook_前端培训

发布时间:2021年05月19日作者:atguigu浏览次数:288

自定义 Hook

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

比如将之前例子中的 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 函数的参数是自由定义的

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

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

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


上一篇:
下一篇:
相关课程

java培训 大数据培训 前端培训 UI/UE设计培训

关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园2号楼3层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)

西安市雁塔区和发智能大厦B座3层(西安校区)