你不知道的React-Hook（useEffect）

hello，大家好。今天我们来学习useEffect，没有学习useState的同学可以看上篇文章你不知道的React-Hook（useState）

如果大家了解React生命周期的话React生命周期，可以把componentDidMount（挂载后），componentDidUpdate（更新后），componentWillUnmount（组件销毁前）的结合体。

为什么要使用useEffect？

在组件内使用 useEffect 是的可以直接从副作用中访问计数器的 count 或者任何的 props。不需要使用特殊的 API 来读取它，它已经在函数的范围内了（通过 useState）。Hooks 拥抱 Javascript 的闭包，并且避免在 Javascript 已经提供解决方案的情况下在去引入特定的 React API。

每次render后useEffect都会执行吗？

对的，每次render都会调用useEffect，但是后续React挂网也给出来优化的方案，可以查看React-useEffect官方文档。

具体使用

1：具体使用（componentDidMount，componentDidUpdate）

 useEffect(()=>{
    document.title = `当前步数：${count}`
 },[count]) 
第二个参数的意思是说如果count当前是6，这次更改后还是6，React将与[6是]上一个渲染和[6]下一个渲染进行比较。
由于数组中的所有项目都相同（6 === 6），因此React会跳过该效果。那就是我们的优化。
注：第二个参数的入参格式必须是Array

2：具体使用（componentUnMount）

useEffect(()=>{
    document.title = `当前步数：${count}`
    return ()=>{
        console.log("ccomponentUnMount");
        这里一般处理的是一些计数器，轮训等等的一些操作，避免切换到别的组件时还在一直执行的问题
     }
 },[count])