教你写几个实用的ReactHooks

背景ReactHooks推出快一年了，改变了我们的开发方式，受到越来越多开发者的喜爱。我们在开发过程中一般会写一些自定义的Hooks，下面分享4个比较实用的，希望对大家有所启发。正文1.useTimer一般理解为时间处理，我们都习惯使用moment:importmomentfrom'moment'//...consttimeRender=time=>moment(time).format('HH:mmDD/MM/YYYY')//...但是这个库的体量还是比较大的：一般我们只使用格式化函数，所以我们自己封装一个useTimer就可以了：很实用。2.函数useInterval也很常用。每隔一段时间执行一次，可用于实现倒计时等功能。代码：3.useGeo有时候我们需要获取经纬度信息，比如实现定位功能。每次单独写不是很优雅，可以封装一下：获取信息的过程是异步的，所以对外暴露了isLoading和error这两个属性，使得处理更加灵活。这样一来，我们就可以很方便的获取到自己需要的位置信息，非常实用。4.usePrefetchHook可以通过延迟加载过滤掉主模块中不需要的模块，帮助您减少加载时间，使您的应用程序渲染和响应更快。例如，我们有一个页面，点击一个按钮后会出现一个弹出窗口。很多时候，我们定义一个Modal组件，导入它，放到Render函数中，使用Visible等一些属性来控制它。例如：importBigModalfrom'./BigModal'//...在我们点击按钮之前，这个模态不是我们需要的，也不需要渲染。所以我们可以通过延迟加载来加载这个模块，同时也减少了我们主模块代码的大小，减少了下载时间和脚本编写时间。代码如下：这个方法和大家熟知的loadable非常相似：constSomeModule=loadable({loader:()=>import('./SomeModule'),})，但是usePretch更灵活，可能是更方便地组织到我们的业务代码中。合理使用这种方法可能会加起来更多，可能会有很好的优化效果。结语以上推荐了几个实用的Hooks，在我们日常工作中比较常见，希望对大家有所启发。本文代码美化生成工具为：https://carbon.now.sh/看起来比较方便，代码内容也不多。有兴趣的可以照着写，加深印象。如果觉得内容有帮助，可以关注我的公众号《前端e进阶》，一起学习成长！