一个寒风凛凛的冬天，精力旺盛的我接手了一个React项目，虽然之前有自学过，也捣腾过一些小的demo，但一直没有应用到实际项目开发中，于是机会来了。 首先看了下项目的React版本，^16.8.6,Nice,可以使用Hook编程，但瞅了眼现有功能代码，清一色的class，当时的内心是拒绝的，但还好需求是新增功能模块， 所以以前的代码跟我佩奇有啥关系？直接使用Hook，干就完了，结果可想而知，果断掉坑里了。经过一段时间的奋力挣扎后，总算把遇到的坑给解决了，于是我觉得记录一下踩坑日记，记录一下萌新时期的懵逼事件。
-
坑1：ref的使用（ ref/wrappedComponentRef )
封装表单组件时，用Antd的Form.create()包裹了一层，于是在父组件使用ref获取组件实例时一直都是undefined，一顿 百度/必应不停地找原因，结果不经意间，在Antd的官网找到了原因，原来是Form.create包裹之后如果要拿到 ref，需要使用 rc-form 提供的 wrappedComponentRef，作为萌新，表示很懵逼，没事整那么多类型干啥？？？算了，解决bug才是王道对吧，兴冲冲的把ref改成了wrappedComponentRef,心想这下总没问题了吧，呵呵，显然现实是残酷的，组件实例还是undefined，瞬间心态爆炸！！！于是又一顿猛查资料，还好最终在官网找到了Hook API： useImperativeHandle ，原来是因为使用了forwardRef函数包装的组件并没有对父级组件暴露实例值，需要通过useImperativeHandle函数将当前组件实例暴露给父组件（API文档中已经指出，useImperativeHandle 应当与 forwardRef 一起使用），找到了问题所在，然后代码一改，喜滋滋的刷新浏览器，问题完美解决，Nice。
-
坑2：useState异步刷新问题
setState的赋值方式官方API中提供了两种方式：
function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( <> Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button> <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button> <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button> </> ); } //惰性初始 state ： setCount(initialCount) 直接传参数，适用于初始化 //跳过 state 更新： setCount(prevCount => prevCount + 1) 通过更新函数赋值，异步刷新数据必备良药重点坑：碰到异步加载数据是，不要过度依赖相信浏览器控制台的打印信息，不然你会怀疑人生的！！！
