React hooks学习--“useEffect”

useEffect

背景

由于函数式组件中没有生命周期的钩子,所以如果要实现与类式组件中相同的效果就需要使用到useEffect来实现.

1. 理解副作用

副作用是函数组件中的概念,副作用对除了自身定义的值以外的变量做出改变.下面是一个简单的例子.

let c = 0

const func = (a, b) => {
   
    c++
    return a + b
}

const a = func(1,2)
console.log("funcResult:",a);
console.log("sideEffectResult",c);

执行结果如图

其中func函数对c的改变即为副作用.如果将函数式组件看做一个和func一样的函数,那么这个函数大概是这个样子,

uiFunc = (state, props) => { ... }

所以除改变其参数(state, props)的方法就是副作用,如网络请求、定时器、操作dom等动作。

2. useEffect使用方法

就是在react的组件中执行副作用的地方,useEffect执行的时机可以是在组件mounted之后,或组件更新时.

useEffect的基础用法:

useEffect(() => {
   
sideEffectsCallBack
return clearSideEffectsCallBack
},[depends