远浅的日志空间
理解他人,内省自己

React Hook在项目中的实际应用 - React使用小记

作者: 远浅发表于: 2019-10-11 06:46分类: 技术

当年准备转行前端的时候,粗略的对当时三大前端框架都稍微摸索了一下,正式从事前端工作之后一直使用Vue进行页面开发,没多大机会在工作中使用。至于后来,写了好久的Node.js,就更没机会了。

终于公司有个没有历史包袱的项目需要配合SSR进行服务端渲染可以重新进行技术选型,通过判断文档完善度和生态环境,最终使用了TypeScript,React,Next.js,Mobx进行开发。中间遇上框架大升级,原生支持了TS,有惊无险的花了一点时间进行迁移,并且升级支持了PWA,最终线上效果还算不错,开发体验比之前的模板引擎渲染要好太多。

下面不会介绍任何原理,只会介绍如何使用,和可能会遇到的问题。

React Hook 常用API

我已经忘记了大部分class组件声明周期的api名称了,大致上Vue和React生命周期都可分为 创建、更新、销毁。使用hook能让你忘记这些繁琐的api,并且再也不需要手动优化啦。✿✿ヽ(°▽°)ノ✿。

useState

用于声明一个函数组件内的状态,和class组件的this.state作用一致。
const [Count,SetCount] = useState<number>(0);

这样Count属性就可以在页面上动态响应了。当你调用SetCount(1)时,就能修改Count的值。对应class组件的操作是this.setState({Count:1})

useEffect

useEffect用于一些有副作用的操作。我常用来替代class组件的componentDidMount。
useEffect(()=>{consolo.log(a);return ()=>{}},[a])

a所在的数组是useEffect的依赖,如果依赖有变化,会再执行一次传入的函数

类似场景比如列表加载会很有用。

初次加载使用const [Page,SetPage] = useState(1), Page是页码,使用Page当做useEffect的依赖,传入的函数则包含了请求数据的逻辑,如果我们需要进行加载下一页的操作,只需要在按钮上绑定一个SetPage(p=>p+1)的动作就可以触发useEffect完成加载下一页的功能。

但是需要注意的是。

useEffect的依赖如果使用不恰当,很有可能会导致无限请求的问题,建议使用官方的webpack 插件帮助排查。

参考资料

overreacted.io 

https://reactjs.org/docs 

赠人玫瑰, 手有余香。🌹
打赏
发表评论
评论列表
评论努力加载中