React Hooks食用指南(一):Function Component with Class Component

好久没有水文了，接下来就写几篇关于React Function Component和 Hooks 的，当做最近工作的总结

在讲React Hook之前，我们先来思考一下，Function Component和class Component有什么区别

在线预览本来想用jsRun，注册完之后发现官方支持引进的库版本都特别老，比如react只支持0.x，相反codesandbox默认支持react就很舒服了

这是一个简单的Demo

点击按钮会把延迟三秒之后输入框的值给打印出来，大家先把玩把玩，看能不能试出FunC和ClassC两者的区别

hooks_demo1

没错，会发现，假如我在点击按钮之后，再去修改UserName，这时候两者会表现出不同的行为。

FunC会记录点击按钮那一刻的值（通常这也是我们想要的），而ClassC则会取触发事件时的UserName。

导致这两者的区别是我们的ClassC在触发的时候，才去取当前的props.name，而FunC呢每一次渲染都会保存当前的状态 （划重点这一点很重要，后面还会出现，很多人没有理解这一点经常写bug）

那么我们可以避免这种情况吗？或者说我们怎样实现，在触发Console的时候取的是按钮点击时的值？

这显然是可以的,我们可以在点击的时候，先捕获当前的Name，然后通过传参的方式来实现。

hook1_demo2

这种实现方式在React里面很常见,但是他会有另一种隐患，假如我现在需要的不止有Name,还有email、phone等，或者我需要读取的不是props还包含了state，那是不是得一个一个捕获传参...

hoo1_demo2_2

当然我们还有另一种简单粗暴而又不是很常见的做法，我们可以把所有的逻辑都挪到render方法里面

这技能实现我们的需求，又不用通过麻烦的各种传参的形式。

等等...我们再回过头来看FunC的实现，除去必要的语法以外，这相识度99.999%

hook1_fn

好了，这就是我们所说的FunC，就是这么简单演变过来的。但是FunC他不像ClassC，我们要在CDM(componentDidMount)调接口怎么办？想要有自己的state怎么办？

这不给出了useEffect和useState给你了嘛吗，所以我们现在经常说的Hooks，其实本质就是辅助FunC的东西，而FunC他就是一个会返回JSX的Function

至此我们第一部分讲完了，下一篇讲一下常用的Hooks

jsonz1993 / react-source-learn