日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React?Hooks獲取數據實現方法介紹_React

作者：YinJie… ? 更新時間： 2022-11-29 編程語言

前言

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 鉤子獲取數據。

原文鏈接：https://blog.csdn.net/qq_49900295/article/details/126987803

欄目分類
最近更新