React+TS 从零开始教程（4）：useEffect

上一节传送门：React+TS 从零开始教程（3）：useState

源码链接：https://pan.quark.cn/s/c6fbc31dcb02

上一节，我们已经学会了React的第一个Hook：useState。 这一节，我们要学习的是另一个非常重要的Hook：useEffect。 Effect在这里，意为副作用？ 不论是哪一个Hook，都是写在函数里面的，比如上个章节中useEffect，就是写在一个函数中。

import React, { useState } from "react";
 
const Switch = () => {
  //每一个变量都要单独做一个State
  //useState解构出两个变量，一个是变量名，一个是赋值这个变量的函数
  const [on,setOn] = useState(false)
  return (
    <>
    <h2 onClick={ () => {setOn(!on)}}>
    {on?'关闭':'开启'}
    </h2>
    </>
  )
}
 
export default Switch;

所以，这个副作用，就是函数的副作用。 怎么理解呢？我们知道，函数就是你给我参数，我给你一个确定的返回，这个叫函数。但是呢，有一些操作其实跟函数的返回没有太大的关系，却出现在了函数体中，比如网络请求，订阅事件等，这些跟函数渲染不相关，就可以被认为是副作用。

两种常见的副作用。

不需要清除的副作用

我们希望在React更新DOM之后，发送一些网络请求，手动变更DOM，记录日志等，这些操作在我们函数返回之后，完全可以忽略掉。 这些情形，就是不需要清除的副作用。 总之，当React函数式组件return了一个DOM，并成功在页面更新之后，如果你还想做一些快活的事情，就写在useEffect的第一个回调参数里。 在Switch.tsx中，写上如下代码

//以下的effect操作会在DOM更新之后发生
useEffect(() => {
  document.title = 'DOM更新完毕，Effect发生！'
});

useEffect接收一个回调函数，里面定义了DOM更新完成之后的操作