亲宝软件园·资讯

展开

react使用useEffect及踩坑

前端常春藤 人气:0

使用useEffect及踩坑记录

useEffect 介绍

useEffect时reactHook中最重要,最常用的hook之一。

useEffect相当于react中的什么生命周期呢?

这个问题在react官网中有过介绍,在使用的过程中,容易被忽略,在面试的时候却经常被问及,(面试造航母,上班拧螺丝?),开个玩笑这个问题并不难回答,下面是react官方的原话:

如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

useEffect需要传递两个参数,第一个参数是逻辑处理函数,第二个参数是一个数组

用法

useEffect(() => {
/** 执行逻辑 */
},[])

重要理解

一、第二个参数存放变量,当数组存放变量发生改变时,第一个参数,逻辑处理函数将会被执行

二、第二个参数可以不传,不会报错,但浏览器会无线循环执行逻辑处理函数。

useEffect(() => {
/** 执行逻辑 */
})

三、第二个参数如果只传一个空数组,逻辑处理函数里面的逻辑只会在组件挂载时执行一次 ,不就是相当于 componentDidMount

useEffect(() => {
/** 执行逻辑 */
},[])

四、第二个参数如果不为空数组,如下

const [a, setA] = useState(1);
const [b, setB] = useState(2);
useEffect(() => {
/** 执行逻辑 */
},[a,b])

逻辑处理函数会在组件挂载时执行一次和(a或者b变量在栈中的值发生改变时执行一次) 这是不是相当于componentDidMount 和 componentDidUpdate 的结合

五、useEffect第一个参数可以返回一个回调函数,这个回调函数将会在组件被摧毁之前和再一次触发更新时,将之前的副作用清除掉。这就相当于componentWillUnmount。

useEffect去除副作用。我们可能会在组件即将被挂载的时候创建一些不断循环的订阅(计时器,或者递归循环)。在组件被摧毁之前,或者依赖数组的元素更新后,应该将这些订阅也给摧毁掉。

比如以下的情况(没有去除计时器,增大不必要的开销和代码风险)

const [time, setTime] = useState(0)
useEffect(() => {
    const InterVal = setInterval(() => {
        setTime(time + 1)
    },1000)
},[])

利用第五点,在组件被摧毁前去除计时器。

const [time, setTime] = useState(0)
useEffect(() => {
    const InterVal = setInterval(() => {
        setTime(time + 1)
    },1000)
    return () => {
           clearInterval(InterVal )
       }
},[])

useEffect常见跳坑

1、useEffect执行函数被循环执行。

出现这种情况可能有两种原因。

没传第二个参数

useEffect(() => {
/** 执行逻辑 */
})

2、你在useEffect执行函数里面改变了useEffect监测的变量

const [a, setA] = useState(1);
useEffect(() => {
/** 执行逻辑 */
setA(a + 1)
},[a])

解决的方法 不要在useEffect第一参数执行函数中去改变第二参数依赖元素的地址的值。当依赖元素的地址的值发生改变,又会执行一次执行函数,这不是无限循环么。

3、useEffect监测不到依赖数组元素的变化。

只有一种可能,依赖数组元素的地址的值根本就没变,比如:

const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
    setA((old) => {
    old.b = 'yx'
    return old
    })
}
useEffect(() => {
/** 当组件挂载时执行一次changeA */
changeA ()
},[])
/**当changeA执行却没有打印 a*/
useEffect(() => {
/** 执行逻辑 */
console.log(a)
},[a])

是因为changeA没有真正的改变a在栈中的值(地址的值),只是改变了a在堆中的值。

useEffect监测不到堆中值得变化,所有引用类型数据都应该注意这一点。

解决的办法:

const [a, setA] = useState({
b: 'dx',
c: '18',
})
const changeA = () => {
    setA((old) => {
    const newA = {...old}
    newA .b = 'yx'
    return newA 
    })
}
useEffect(() => {
/** 当组件挂载时执行一次changeA */
changeA ()
},[])
/**当changeA执行打印  {b:'yx',c:'18'}  */
useEffect(() => {
/** 执行逻辑 */
console.log(a)
},[a])

hooks中useEffect()使用总结

常见使用

获取数据案例:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
  const [data, setData] = useState({ hits: [] });
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://hn.algolia.com/api/v1/search?query=redux',
      );
      setData(result.data);
    };
    fetchData();
  }, []);
  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}
export default App;

上面例子中,useState()用来生成一个状态变量(data),保存获取的数据;useEffect()的副效应函数内部有一个 async 函数,用来从服务器异步获取数据。拿到数据以后,再用setData()触发组件的重新渲染。

由于获取数据只需要执行一次,所以上例的useEffect()的第二个参数为一个空数组

线上运行代码

useEffect() 的第二个参数说明

有时候,我们不希望useEffect()每次渲染都执行,这时可以使用它的第二个参数,使用一个数组指定副效应函数的依赖项,只有依赖项发生变化,才会重新渲染。

function Welcome(props) {
  useEffect(() => {
    document.title = `Hello, ${props.name}`;
  }, [props.name]);
  return <h1>Hello, {props.name}</h1>;
}

上面例子中,useEffect()的第二个参数是一个数组,指定了第一个参数(副效应函数)的依赖项(props.name)。只有该变量发生变化时,副效应函数才会执行。如果第二个参数是一个空数组,就表明副效应参数没有任何依赖项。

因此,副效应函数这时只会在组件加载进入 DOM 后执行一次,后面组件重新渲染,就不会再次执行。这很合理,由于副效应不依赖任何变量,所以那些变量无论怎么变,副效应函数的执行结果都不会改变,所以运行一次就够了。

useEffect() 第一个函数参数的返回值

副效应是随着组件加载而发生的,那么组件卸载时,可能需要清理这些副效应。

useEffect()允许返回一个函数,在组件卸载时,执行该函数,清理副效应。如果不需要清理副效应,useEffect()就不用返回任何值。

useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, [props.source]);

上面例子中,useEffect()在组件加载时订阅了一个事件,并且返回一个清理函数,在组件卸载时取消订阅。

实际使用中,由于副效应函数默认是每次渲染都会执行,所以清理函数不仅会在组件卸载时执行一次,每次副效应函数重新执行之前,也会执行一次,用来清理上一次渲染的副效应。

useEffect() 的注意点

使用useEffect()时,有一点需要注意。如果有多个副效应,应该调用多个useEffect(),而不应该合并写在一起。

错误写法:

function App() {
  const [varA, setVarA] = useState(0);
  const [varB, setVarB] = useState(0);
  useEffect(() => {
    const timeoutA = setTimeout(() => setVarA(varA + 1), 1000);
    const timeoutB = setTimeout(() => setVarB(varB + 2), 2000);
    return () => {
      clearTimeout(timeoutA);
      clearTimeout(timeoutB);
    };
  }, [varA, varB]);
  return <span>{varA}, {varB}</span>;
}

上面的例子是错误的写法,副效应函数里面有两个定时器,它们之间并没有关系,其实是两个不相关的副效应,不应该写在一起。正确的写法是将它们分开写成两个useEffect()。

正确写法:

function App() {
  const [varA, setVarA] = useState(0);
  const [varB, setVarB] = useState(0);
  useEffect(() => {
    const timeout = setTimeout(() => setVarA(varA + 1), 1000);
    return () => clearTimeout(timeout);
  }, [varA]);
  useEffect(() => {
    const timeout = setTimeout(() => setVarB(varB + 2), 2000);
    return () => clearTimeout(timeout);
  }, [varB]);
  return <span>{varA}, {varB}</span>;
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持。

加载全部内容

相关教程
猜你喜欢
用户评论