ReactHooks获取数据实现方法介绍

Helen ·

更新时间:2024-11-14

· 597 次阅读

前言

useState

useEffect

获取数据

前言

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

方法数据

1024 个赞