React Hook的使用

Posted 2023-04-02

参考技术A

什么是Hook

Hook是React 16.8后才新增加的特性。为什么要增加这个特性呢？

1.减少代码量

我们知道React组件包括有状态组件和无状态组件，有状态组件的定义如下：

这样，当state发生修改时，react会自动执行render函数进行重新渲染。

如果使用Hook的代码则变成：

这样代码就简化了很多。

2.可以减少对this的使用。

React对this的使用并不那么友善。如果使用Hook，则不用频繁使用this了，因为Hook已经对this做了处理。

3.更加简介的API

React提供了

四个Hook，包含了组件参数传递的所有类型。

总结：React在Hook的设计大大方便了React的使用，建议通过Hook去优化React的代码实现。

react hook介绍

参考技术A react hook是react中引入新特性，它可以让react函数组件也拥有状态；
通过自定义hook可以实现在组件间公用状态操作；

react提供了useState、useEffect两个hook函数来创建stack hook和effect hook

在函数组件内使用useState可以给组件使用状态；
useState的入参为初始状态，出参为当前state以及更新state的函数；

useState第一次执行时将创建一个状态，之后执行都是使用这个状态；

使用useEffect可以给组件添加副作用逻辑；
所谓副作用个人理解是与react范围外的世界产生的交互，如dom操作、网络请求等(说实话，副作用具体是啥我还没完全弄明白)；
useEffect入参有两个第一个参数是副作用函数、第二个参数是个用于判断是否执行副作用的数组；

副作用有一个执行过程和一个可选的清除过程，副作用函数定义了执行过程，它的返回值函数定义了清除过程；
在组件函数中定义的副作用像是渲染结果的一部分，副作用在每次渲染后都会执行，在渲染前、组件销毁前清除之前的副作用；这样做使得我们的副作用可以读到每次的props、state；

如果不想每次渲染都执行副作用，可以给useEffect第二个参数传一数组，当数组中的元素没有变化时，不会触发副作用；

自定义hook其实就是个内部使用了useState、useEffect的普通函数，并且函数名以use开头；
使用自定义hook可以将组件逻辑提取到可重用的函数中；

TODO
render props、高阶组件、effect性能优化的注意事项