React Hooks实战中useEffect踩坑记录

最近一直在看React Hook的相关知识，奈何没有实际的项目开发，于是乎上周新来的需求就决定用Hook来做，特此记录一下开发中遇到的一个印象比较深刻的问题：

使用useEffectt进行性能优化时出现无限运行的情况：

出现这个问题的原因是因为useEffect的第二个参数数组中的值为对象或者数组：

React中判断是否需要执行useEffect内代码是通过Object.is进行判断的，而这个判断方法对于对象和数组之间的判断永远返回false，所以就会一直执行useEffect的内容

解决方法：

1.根据实际情况将执行依赖对象改为依赖对象中的某个属性（此时React会发出警告，可以忽略）

2.在函数体内对代码的执行条件进行判断

其中usePrevState是获取上一轮数据的自定义Hook

以上是自己摸索出来的两种解决的方法（第二种会发两次请求，是因为异步返回的pagination和初始的不一致，但是不会发出警告信息）

 

通过这次使用Hook的开发经历，虽然过程比较曲折，但是能真实的感觉的Hook带来的良好的开发体验，业务的逻辑更加的紧密了，不会被拆分在各个生命周期里，以前很多重复执行的逻辑和函数需要在不同的生命周期执行，麻烦不说，维护起来也比较费劲。最明显也是对猿们最友好的一点就是代码量比起以往的Class写法少了不是一点半点，对于我这种懒人真是再爽不过了。