脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Hooks

React Hooks获取数据实现方法介绍

 更新时间：2022年10月22日 10:37:43   作者：YinJie…  
这篇文章主要介绍了react hooks获取数据,文中给大家介绍了useState dispatch函数如何与其使用的Function Component进行绑定，实例代码给大家介绍的非常详细，需要的朋友可以参考下

前言

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • react 权限树形结构实现代码

    react 权限树形结构实现代码

    这篇文章主要介绍了react 权限树形结构实现代码,项目背景react + ant design,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2024-05-05
  • 利用React实现虚拟列表的示例代码

    利用React实现虚拟列表的示例代码

    虚拟列表，其实就是将一个原本需要全部列表项的渲染的长列表，改为只渲染可视区域内的列表项，但滚动效果还是要和渲染所有列表项的长列表一样。本文就将利用React实现虚拟列表，需要的可以参考一下
    2022-08-08
  • React-Hooks之useImperativeHandler使用介绍

    React-Hooks之useImperativeHandler使用介绍

    这篇文章主要为大家介绍了React-Hooks之useImperativeHandler使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • 使用React Redux实现React组件之间的数据共享

    使用React Redux实现React组件之间的数据共享

    在复杂的React应用中,组件之间的数据共享是必不可少的,为了解决这个问题,可以使用React Redux来管理应用的状态,并实现组件之间的数据共享,在本文中,我们将介绍如何使用React Redux实现Count和Person组件之间的数据共享,需要的朋友可以参考下
    2024-03-03
  • React split实现分割字符串的使用示例

    React split实现分割字符串的使用示例

    当我们需要将一个字符串按照指定的分隔符进行分割成数组时,我们可以在组件的生命周期方法中使用split方法来实现这个功能,本文就来介绍一下,感兴趣的可以了解下
    2023-10-10
  • React 父子组件通信的实现方法

    React 父子组件通信的实现方法

    这篇文章主要介绍了React 父子组件通信的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • Ant Design与Ant Design pro入门使用教程

    Ant Design与Ant Design pro入门使用教程

    Ant Design 是一个服务于企业级产品的设计体系,组件库是它的 React 实现,antd 被发布为一个 npm 包方便开发者安装并使用,这篇文章主要介绍了Ant Design与Ant Design pro入门,需要的朋友可以参考下
    2023-12-12
  • React复制到剪贴板的示例代码

    React复制到剪贴板的示例代码

    本篇文章主要介绍了React复制到剪贴板的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 浅谈对于react-thunk中间件的简单理解

    浅谈对于react-thunk中间件的简单理解

    这篇文章主要介绍了浅谈对于react-thunk中间件的简单理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 在react配置使用less的完美方案

    在react配置使用less的完美方案

    由于 create-react-app 使用 webpack 作为其模块打包器,你需要修改 webpack 的配置来支持 .less 文件,这篇文章主要介绍了在react配置使用less的完美方案,需要的朋友可以参考下
    2024-04-04

最新评论