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

news2024/7/7 17:11:49

上一节传送门：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更新完成之后的操作，或者说给组件添加了一个渲染后的副作用。 App.tsx

刷新页面

页面的标题发生了变化，符合预期。注意，useEffect会在每次渲染后都执行1次。之前用Class组件的时候，分挂载和更新两个钩子，所以我们想用这种DOM更新后的操作的话，就得在这两个钩子中各写一遍逻辑，很麻烦。现在有了useEffect，就化繁为简了。而且，非常好懂。

需要清除的副作用

有些副作用是需要被清除的，比如事件的添加。在之前做法中，我们是在componentDitMount中添加事件，然后在componentWillUnmount中解绑事件。现在我们用useEffect，该如何实现呢？我们新创建一个组件，叫MouseTracker。

顾名思义，就是一个鼠标位置的追踪器。然后，引入React依赖

import React, { useEffect, useState } from "react";

声明一下函数组件

const MouseTracker : React.FC = () => {
    
}

然后定义坐标状态

//定义坐标
    const [pos,setPos] = useState({x:0,y:0})

直接return

return (
    <p>X: {pos.x} , Y:{pos.y}</p>
)

导出去

export default MouseTracker;

然后在App.tsx中引入这个组件

目前这个x和y还是静态的，都是0，我们希望每次鼠标点击的时候，就更新这个坐标。什么时候更新呢，首先是鼠标点击之后，然后触发x和y的更新，也就是dom的更新。让我们在MouseTracker中添加一个effect

//事件绑定
useEffect(() => {
    const bindCallback = (e:MouseEvent) => {
        console.log('鼠标点击了')
        setPos({x:e.clientX,y:e.clientY})     
    }
    //绑定click事件
    document.addEventListener('click',bindCallback)
})

现在页面是这样的

我点一次

再点一次

每次点击，都会增加N的effect次数。为什么呢？因为useEffect会在每次dom更新后触发，而我们添加了点击事件后没有及时地去清除，所以之前的点击事件还存在，导致每次更新后，所有的点击事件都触发了effect。怎么解决呢？我们看下useEffect的源码

    /**
     * Accepts a function that contains imperative, possibly effectful code.
     *
     * @param effect Imperative function that can return a cleanup function
     * @param deps If present, effect will only activate if the values in the list change.
     *
     * @version 16.8.0
     * @see {@link https://react.dev/reference/react/useEffect}
     */
    function useEffect(effect: EffectCallback, deps?: DependencyList): void;

可以看到，这个函数的第一个参数，callback，并不是一定为void，也允许我们返回一个函数。 @param effect Imperative function that can return a cleanup function 意思很明确了，它允许我们返回一个cleanup function，也就是清除函数。我们修改一下代码

//事件绑定
useEffect(() => {
    const bindCallback = (e:MouseEvent) => {
        console.log('鼠标事件绑定')
        setPos({x:e.clientX,y:e.clientY})     
    }
    //绑定click事件
    document.addEventListener('click',bindCallback)
    return () => {
        document.removeEventListener('click',bindCallback)
    }
})

我连续点击了四次，符合预期。

怎么限制Effect

上面的例子告诉我们，只有一重新渲染，effect必执行，这可能会带来一些性能问题，有什么办法对effect做限制嘛？再来看源码

    /**
     * Accepts a function that contains imperative, possibly effectful code.
     *
     * @param effect Imperative function that can return a cleanup function
     * @param deps If present, effect will only activate if the values in the list change.
     *
     * @version 16.8.0
     * @see {@link https://react.dev/reference/react/useEffect}
     */
    function useEffect(effect: EffectCallback, deps?: DependencyList): void;

这次我们重点看第二个参数 @param deps If present, effect will only activate if the values in the list change. 第二个参数是一个数组，如果数组里面的任何一项发生变化，就会触发effect的执行。刚才的例子中，我们每次点击鼠标，就会触发一次事件的绑定和卸载，实在是有点太浪费了。我们希望在组件加载的时候绑定一次就行了，然后在组件卸载的时候再解绑。

useEffect(() => {
    console.log('点击事件绑定')
    const bindCallback = (e:MouseEvent) => {
        console.log('鼠标点击了')
        setPos({x:e.clientX,y:e.clientY})     
    }
    //绑定click事件
    document.addEventListener('click',bindCallback)
    return () => {
        console.log('点击事件解绑')
        document.removeEventListener('click',bindCallback)
    }
},[])

我添加一个空数组，代表这个effect不依赖于任何state和props，只跟组件的安装和卸载有关。然后修改App.tsx（省略页面其他代码）

import React,{useState} from "react";
import MouseTracker from "./components/MouseTracker";

function App() {
  let [showMouseTracker,setShowMouseTracker] = useState(true)
  return (
    <div className="App">
      <div>
        <button onClick={() => {setShowMouseTracker(!showMouseTracker)}}>
          {showMouseTracker ? '关闭鼠标追踪': '打开鼠标追踪'}
        </button>
      </div>
      {showMouseTracker && <MouseTracker />}
      
    </div>
  );
}

export default App;

刷新页面