react hooks入门详细教程

state hooks

案例：

usestate是react自带的一个hook函数，它的作用就是用来声明状态变量。usestate这个函数接收的参数是我们的状态初始值（initial state），它返回了一个数组，这个数组的第[0]项是当前当前的状态值，第[1]项是可以改变状态值的方法函数。
所以我们做的事情其实就是，声明了一个状态变量count，把它的初始值设为0，同时提供了一个可以更改count的函数setcount。

当用户点击按钮时，我们调用setcount函数，这个函数接收的参数是修改过的新状态值。接下来的事情就交给react了，react将会重新渲染我们的example组件，

假如一个组件有多个状态值怎么办？
首先，usestate是可以多次调用的，所以我们完全可以这样写：

其次，usestate接收的初始值没有规定一定要是string/number/boolean这种简单数据类型，它完全可以接收对象或者数组作为参数。唯一需要注意的点是，之前我们的this.setstate做的是合并状态后返回一个新状态，而usestate是直接替换老状态后返回新状态。

hook，一方面它是直接用在function当中，而不是class；另一方面每一个hook都是相互独立的，不同组件调用同一个hook也能保证各自状态的独立性。

react是怎么保证多个usestate的相互独立的？

答案是，react是根据usestate出现的顺序来定的。我们具体来看一下

react规定我们必须把hooks写在函数的最外层，不能写在ifelse等条件语句当中，来确保hooks的执行顺序一致。

effect hooks

案例：

假如不用hooks,我们会怎么写?

我们写的有状态组件，通常会产生很多的副作用（side effect），比如发起ajax请求获取数据，添加一些监听的注册和取消注册，手动修改dom等等。我们之前都把这些副作用的函数写在生命周期函数钩子里，比如componentdidmount，componentdidupdate和componentwillunmount。而现在的useeffect就相当与这些声明周期函数钩子的集合体。它以一抵三。

useeffect怎么解绑一些副作用?

传给useeffect的副作用函数返回一个新的函数即可。这个新的函数将会在组件下一次重新渲染之后执行。

怎么跳过一些不必要的副作用函数?

按照上一节的思路，每次重新渲染都要执行一遍这些副作用函数，显然是不经济的。怎么跳过一些不必要的计算呢？我们只需要给useeffect传第二个参数即可。用第二个参数来告诉react只有当这个参数的值发生改变时，才执行我们传的副作用函数（第一个参数）。

当我们第二个参数传一个空数组[]时，其实就相当于只在首次渲染的时候执行。也就是componentdidmount加componentwillunmount的模式。不过这种用法可能带来bug，少用。

还有哪些自带的effect hooks?

usecontext
usereducer
usecallback
usememo
useref
useimperativemethods
usemutationeffect
uselayouteffect

怎么写自定义的effect hooks?

为什么要自己去写一个effect hooks? 这样我们才能把可以复用的逻辑抽离出来，变成一个个可以随意插拔的“插销”，哪个组件要用来，我就插进哪个组件里

比如我们可以把上面写的friendstatus组件中判断朋友是否在线的功能抽出来，新建一个usefriendstatus的hook专门用来判断某个id是否在线。

这时候friendstatus组件就可以简写为：

假如这个时候我们又有一个朋友列表也需要显示是否在线的信息：

这样就实现了组件复用。

taro hooks

在 taro 中使用 hooks api 很简单，taro 的专有 hooks（例如 usepagescroll, usereachbottom）从 @tarojs/taro 中引入，框架自己的 hooks （例如 useeffect, usestate）从对应的框架引入。

到此这篇关于react hooks入门详细教程的文章就介绍到这了,更多相关react hooks入门内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！