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

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

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

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

React Hook 常用API

我已经忘记了大部分class组件声明周期的api名称了，大致上Vue和React生命周期都可分为 创建、更新、销毁。使用hook能让你忘记这些繁琐的api。

useState

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

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

useEffect

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

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

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

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

但是需要注意的是。

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

参考资料

overreacted.io 

https://reactjs.org/docs