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

目录

• 前言
• 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 钩子获取数据。