一般上来就直接给链接，我鼓励直接看文档:
https://reactjs.org/docs/hooks-effect.html
https://zh-hans.reactjs.org/docs/hooks-effect.html
Hook使用规则：
1. 只能在 函数 最外层调用Hook， 不要在循环、条件判断、或者子函数中调用
2. 只能在React的函数组件中调用Hook、不要在其他javascript函数中调用
(还有在自定义的Hook中可以调用)
在react Hook中我们已经使用过了state，但是如果全部使用react-hook就会有一个问题？就是class这种声明组件的方式可以使用生命周期，但是在Hook使用中怎样使用其他操作呢？
在react中就是使用Effect来使用生命周期，那Effect指的是哪个生命周期呢？
你可以看做
useEffectHook 看做componentDidMount，componentDidUpdate和componentWillUnmount这三个函数的组合。
我们在使用怎应该如何使用呢？看下面简单的例子（来源于官网）
import React, { Fragment, useState, useEffect } from 'react'
import { Button } from 'antd'
const HookEffect = () => {
const [count, setCount] = useState(0)
// 相当于componentDidMount 和 componentDidUpdate
// 如果需要使用componentWillUnmount则需要在内部return 一个函数该函数可以实现
useEffect(() => {
document.title = `You clicked ${count} times`
})
return (<Fragment>
<h2>You Clicked {count} times</h2>
<Button onClick={() => setCount(addcount(count))}>点击增加</Button>
</Fragment>)
function addcount (count) {
count += 1
return count
}
}
export default HookEffect
以上代码就是最简单的effect的使用，但是这还不能满足我们的使用
我们需要使用effect进行优化，因为在项目开发中我们需要count这个变量在更新的时候再进行重新渲染，不需要无效的更新
useEffect(() => {
document.title = `You clicked ${count} times`
}, [count])
上面这样的写法就可以避免无效的渲染，（之后我们会写一个例子，表述这个怎样避免）
那以上就基本的effet的使用，现在我们就要说怎样在effect中实现和class声明方式中的componentWillUnmount这个效果
就是在effect这个函数中return 一个函数就可以实现componentWillUnmount这个功能，就像这样
其实这个例子我们并不能看出来这个这个具体怎么使用，后面我们会写一个小例子综合使用一下useSate和useEffect
focusdroid：ReactHook综合使用小例子(useState、useEffect)zhuanlan.zhihu.com
微信扫一扫 
支付宝扫一扫 