ReactHooks获取数据实现方法介绍

React Hooks React Hooks获取数据 2022-11-13 18:11:32 921人浏览泡泡鱼

摘要

目录前言useStateuseEffect获取数据前言 React16.8推出hooks更好的支持函数组件,使用函数组件更容易进行代码的复用,拓展性更强。 useState useS

前言

React16.8推出hooks更好的支持函数组件,使用函数组件更容易进行代码的复用,拓展性更强。

useState

useState类似于class组件的state功能,用于更新视图

import React, { Component, useState } from 'react';
export default function Hello() {
  const [count, setCount] = useState(0); //设置默认值为0
  return <div>
    {count}
    <button onClick={()=>setCount(count + 1)}>增加</button>
  </div>
}
//useState还可以使用函数进行赋值
 const [count, setCount] = useState(()=>0); //设置默认值为0

useEffect

useEffect接受两个参数,第一个参数是要执行的回调函数,第二个参数是依赖的参数,如下面的例子里只有当count发生变化的时候才会打印count,当第二个参数为空数组的时候,组件在渲染完成后会执行一次,第二个参数不传递的时候每次渲染都会执行

export default function Hello() {
  const [count, setCount] = useState(() => 0); //设置默认值为0
  // useEffect
  useEffect(() => {
  }, [count])
  return <div>
    {count}
    <button onClick={() => setCount(count + 1)}>增加</button>
  </div>
}

带有返回值的useEffect用于清除执行过程中的副作用

  useEffect(()=>{
    const timer = setInterval(() => {
      console.log(count);
    }, 1000);
    window.addEventListener('resize',handleResize);
    return function(){
      clearInterval(timer);
      window.removeEventListener('resize',handleResize);
    }
  }, [count])

如果每次执行useEffect都定义一个定时器,那定时器会越来越多,通过在返回函数中清除定时器取消这个副作用。useEffect返回函数的执行时机是下一次useEffect执行之前。

利用这一点可以实现防抖和节流函数

获取数据

下面是在函数组件中获取数据最基本的方式：

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

useEffect 的 hook 用于从 API 中获取从后端请求回来的数据，并使用 state hook 的更新函数在组件的本地状态中设置数据。prmomise 解析发生在异步/等待中。

但是，当你运行应用程序时，你会发现效果挂钩在组件装载时运行，但在组件更新时也会运行，这样它就会一次又一次地获取数据。这是一个错误，需要避免。我们只想在组件挂载时获取数据。这就是为什么你可以提供一个空数组作为 effect hook 的第二个参数，以避免在组件更新时激活它：

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

第二个参数可用于定义钩子所依赖的所有变量（在此数组中分配）。如果其中一个变量发生更改，则挂载将再次运行。如果包含变量的数组为空，则在更新组件时根本不会运行钩子，因为它不必监视任何变量。

还有最后一个问题。在代码中，我们使用 async/await 从第三方 API 获取数据。而我们知道 async函数返回一个 AsyncFunction 对象。但是，effect hook 应不返回任何内容或清理函数。这就是为什么不允许直接在 effect hook 中使用异步的原因。让我们通过调用effect 内的异步函数来实现它的解决方法：

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;

这就是使用 React 钩子获取数据。

到此这篇关于React Hooks获取数据实现方法介绍的文章就介绍到这了,更多相关React Hooks内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: ReactHooks获取数据实现方法介绍

本文链接: https://www.lsjlt.com/news/169917.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

ReactHooks获取数据实现方法介绍

目录前言useStateuseEffect获取数据前言 react16.8推出hooks更好的支持函数组件,使用函数组件更容易进行代码的复用,拓展性更强。 useState useS...

99+

2022-11-13

React Hooks React Hooks获取数据
SpringMVC获取请求参数实现方法介绍

目录一、通过ServletAPI获取二、通过控制器方法的形参获取请求参数三、@RequestParam四、@RequestHeader五、@CookieValue六、通过POJO获取...

99+

2022-11-13

SpringMVC获取请求参数 SpringMVC请求参数
ReactHooks使用方法全方位介绍

目录hooks介绍useState(保存组件状态)useEffect()useCallback(记忆函数)useMemo(记忆组件)useRef(保存引用值)useReducerus...

99+

2023-03-19

React Hooks React Hooks方法
Python获取cookie用法介绍

一、基本介绍什么是cookie？ Cookie，指的是网站为了辨别用户身份而存储在用户本地终端上的数据。简单来说，就是通过在用户访问网站时，将一小段数据送给用户，并且要求用户在以后访问时再次提供此数据，以便验证用户的身份。如何获取coo...

99+

2023-09-18

python 开发语言
C++异步数据交换实现方法介绍

异步数据交换，除了阻塞函数 send() 和 recv() 之外，Boost.MPI 还支持与成员函数 isend() 和 irecv() 的异步数据交换。名称以 i 开头，表示函数...

99+

2022-11-21

C++异步数据交换 C++数据交换
C#获取打印机列表方法介绍

方法一第一步：添加引用 using System.Printing; 第二步：代码 public static List<string> GetPrintList() ...

99+

2024-04-02
selenium动态数据获取的方法实现

目录...

99+

2024-04-02
AndroidSharePreferences与数据库SQLite存储实现方法介绍

目录Android数据存储几种方式一、共享参数二、数据库SQLite1、数据定义语言（DDL）（1）创建表格（2）删除表格（3）修改表结构2、数据操纵语言（DML）（1）添加记录（2...

99+

2024-04-02
JQuery获取对象的方式介绍

一、引用官网下载对应的jquery版本文件，在需要用到jquery的地方，用script标签引入进来 <head> <script src="jquery-1.1...

99+

2024-04-02
Springboot与vue实现数据导出方法具体介绍

目录前言一、需求二、Springboot进行数据导出1.Java后端代码2.Vue前端代码3.其他几种Java后端导出方法提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助...

99+

2023-02-09

Springboot数据导出 Vue数据导出
win7 system权限怎么获取?win7管理员权限获取方法介绍

　　win7 system权限怎么获取有时我们需要删除一些东西，需要system权限，但是SYSTEM是至高无上的超级管理员帐户，该如何获得呢下文小编将告诉大家win7管理员权限获取方法，有需要的朋友可以过来了解一下。软...

99+

2023-06-06

win7 system权限怎么获取 win7管理员权限获取获取管理员权限 system 方法
SQLServer实现分页方法介绍

一、创建测试表 CREATE TABLE [dbo].[Student]( [id] [int] NOT NULL, [name] [nvarchar](5...

99+

2024-04-02
SpringBoot公共页面抽取方法实现过程介绍

目录1. 需求描述2. 使用 thymeleaf 抽取公共页面方法3. insert与replace及include抽取公共页面的区别1. 需求描述我们有这样一个页面，其具有左侧导...

99+

2024-04-02
chatgpt赋能python：Python如何获取股票数据——详细介绍

Python如何获取股票数据——详细介绍 Python作为一款专业的编程语言，其应用领域十分广泛，其中之一就是股票数据的获取。本文将详细介绍Python如何获取股票数据的方法，帮助大家快速获取所需的股...

99+

2023-09-03

python chatgpt pandas 计算机
php实现只获取数字的方法

这篇文章将为大家详细讲解有关php实现只获取数字的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。php实现只获取数字的方法：1、使用正则表达式获取数字；2、使用“in_array”方法获取数字；3、使...

99+

2023-06-14
Java中获取键盘输入值的三种方法介绍

程序开发过程中，需要从键盘获取输入值是常有的事，但Java它偏偏就没有像c语言给我们提供的scanf()，C++给我们提供的cin()获取键盘输入值的现成函数!Java没有提供这样的函数也不代表遇到这种情况我们就束手无策，请你看以下三种解决...

99+

2023-05-30

java 获取输入 ava
Python数据获取实现图片数据提取

目录一、利用exifread提取图片的EXIF信息二、循环遍历图片信息比如我随便从手机上传一张图片到我的电脑里，通过python可以获取这张照片的所有信息。如果是数码相机拍摄的照片，...

99+

2024-04-02
C++获取文件大小数值的三种方式介绍

目录方式一方式二方式三总结方式一推荐使用此方式获得文件大小！ C/C++、Window、Linux 环境都可以使用！通过结构体struct stat获得。需要包含头文件：#in...

99+

2024-04-02
php怎么获取数组长度？count()函数介绍

在PHP中，要返回一个数组的长度，可以使用count()函数。这个函数返回给定数组的元素数量。下面是使用count()函数的一些示例。示例1：$array = array(1, 2, 3, 4, 5); $length = count($a...

99+

2023-05-14
DataTable的AcceptChanges()和RejectChanges()方法介绍并实现DataGridView数据增、删、改

一、DataTable.AcceptChanges()方法提交自上次调用AcceptChanges()方法以来对该表进行的所有更改。调用AcceptChanges()时，任何扔处于...

99+

2024-04-02