关于hooks中useEffect()的使用总结

 更新时间:2024年01月04日 08:48:55   作者:庚中  
这篇文章主要介绍了关于hooks中useEffect()的使用总结,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

常见使用

获取数据案例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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()每次渲染都执行,这时可以使用它的第二个参数,使用一个数组指定副效应函数的依赖项,只有依赖项发生变化,才会重新渲染。

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

上面例子中,useEffect()的第二个参数是一个数组,指定了第一个参数(副效应函数)的依赖项(props.name)。

只有该变量发生变化时,副效应函数才会执行。如果第二个参数是一个空数组,就表明副效应参数没有任何依赖项。因此,副效应函数这时只会在组件加载进入 DOM 后执行一次,后面组件重新渲染,就不会再次执行。

这很合理,由于副效应不依赖任何变量,所以那些变量无论怎么变,副效应函数的执行结果都不会改变,所以运行一次就够了。

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

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

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

1
2
3
4
5
6
useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, [props.source]);

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

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

useEffect() 的注意点

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

错误写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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()。

正确写法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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>;
}

总结

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

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/xiaodi520520/article/details/110169180

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • React-router v4 路由配置方法小结

    React-router v4 路由配置方法小结

    本篇文章主要介绍了React-router v4 路由配置方法小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React前端解链表数据结构示例详解

    React前端解链表数据结构示例详解

    这篇文章主要为大家介绍了React前端解链表数据结构示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • react实现拖拽模态框

    react实现拖拽模态框

    这篇文章主要为大家详细介绍了react实现拖拽模态框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • react用Redux中央仓库实现一个todolist

    react用Redux中央仓库实现一个todolist

    这篇文章主要为大家详细介绍了react用Redux中央仓库实现一个todolist,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 详解React中错误边界的原理实现与应用

    详解React中错误边界的原理实现与应用

    在React中,错误边界是一种特殊的组件,用于捕获其子组件树中发生的JavaScript错误,并防止这些错误冒泡至更高层,导致整个应用崩溃,下面我们就来看看它的具体应用吧
    2024-03-03
  • 详解React中的不可变值

    详解React中的不可变值

    这篇文章主要介绍了React中的不可变值的相关资料,帮助大家更好的理解和学习使用react.js,感兴趣的朋友可以了解下
    2021-04-04
  • React使用ref方法与场景介绍

    React使用ref方法与场景介绍

    这篇文章主要介绍了React使用ref方法与场景,React支持给任意组件添加特殊属性。ref属性接受一个回调函数,它在组件被加载或卸载时会立即执行
    2022-10-10
  • react native 获取地理位置的方法示例

    react native 获取地理位置的方法示例

    这篇文章主要介绍了react native 获取地理位置的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 详解React的组件通讯

    详解React的组件通讯

    这篇文章主要介绍了详解react组件通讯方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-11-11
  • Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解

    Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解

    今天是使用 Reactjs + Nodejs + Mongodb 实现文件上传功能,前端我们使用 Reactjs + Axios 来搭建前端上传文件应用,后端我们使用 Node.js + Express + Multer + Mongodb 来搭建后端上传文件处理应用,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2022-06-06

最新评论