第二个hooks: useEffect

首先理解什么是副作用 :

• 主作用：就是根据数据（state/props）渲染 UI

• 副作用：数据（Ajax）请求、手动修改 DOM、开启定时器，清空定时器，添加事件监听，删除事件, localStorage 操作等

一句话概括: 对于react 组件来说,除了渲染ui之外的其他操作.都可以称为副作用

-------------------------------------

执行时机

页面渲染完成之后，执行Effect；来写个小案例测试一下

1.导入

import React, { useState, useEffect } from 'react'

2.使用

 上图中,每次点击按钮就让count + 1 , 并打印一段文字

       可以看到每次点击都会执行一次,组件也会重新渲染一次,控制台输出3次是因为首次加载组件会执行一次.

-----------------------------------------------------------

那么问题来了, 如果我们要发请求呢? 不可能每次渲染都发一次请求吧.

那就看看 useEffect 的第二个参数: [ ]  

 依赖项可以看到是个数组, 当数组为空是会发生什么??  先修改之前的代码, 再来看看

 结果可以看到,连续点7次,只执行了一次副作用, 那我问你, 什么时候执行的这一次? 

对了, 首次加载的时候执行的, 那在里面发请求不是最合适不过了吗? 

是不是有在vue里面created发请求的感觉......

------------------------------------------------------------------------------

细心的老哥,可能会问依赖项里面填啥呢? 

那来把count 填进去看看

 连点3次,看右侧控制台输出,是不是感觉到了什么? 

也就是 当依赖项更新时,才会执行副作用. 

不然为什么叫依赖项,对不对.

------------------------------------------------------

总结: 

情况1：不带第二个参数。执行时机：每次更新之后都要执行

情况2：带第二个参数，参数是空数组。执行时机：只执行第一次 (组件首次加载)

情况3：带第二个参数（数组格式），并指定了依赖项。执行时机：（1）初始执行一次 （2）依赖项的值变化了，执行一次

依赖项: 就是组件中用useState定义的状态