React Hooks獲取數(shù)據(jù)實(shí)現(xiàn)方法介紹
前言
react16.8推出hooks更好的支持函數(shù)組件,使用函數(shù)組件更容易進(jìn)行代碼的復(fù)用,拓展性更強(qiáng)。
useState
useState類似于class組件的state功能,用于更新視圖
import React, { Component, useState } from 'react'; export default function Hello() { const [count, setCount] = useState(0); //設(shè)置默認(rèn)值為0 return <div> {count} <button onClick={()=>setCount(count + 1)}>增加</button> </div> } //useState還可以使用函數(shù)進(jìn)行賦值 const [count, setCount] = useState(()=>0); //設(shè)置默認(rèn)值為0
useEffect
useEffect接受兩個參數(shù),第一個參數(shù)是要執(zhí)行的回調(diào)函數(shù),第二個參數(shù)是依賴的參數(shù),如下面的例子里只有當(dāng)count發(fā)生變化的時候才會打印count,當(dāng)?shù)诙€參數(shù)為空數(shù)組的時候,組件在渲染完成后會執(zhí)行一次,第二個參數(shù)不傳遞的時候每次渲染都會執(zhí)行
export default function Hello() { const [count, setCount] = useState(() => 0); //設(shè)置默認(rèn)值為0 // useEffect useEffect(() => { }, [count]) return <div> {count} <button onClick={() => setCount(count + 1)}>增加</button> </div> }
帶有返回值的useEffect用于清除執(zhí)行過程中的副作用
useEffect(()=>{ const timer = setInterval(() => { console.log(count); }, 1000); window.addEventListener('resize',handleResize); return function(){ clearInterval(timer); window.removeEventListener('resize',handleResize); } }, [count])
如果每次執(zhí)行useEffect都定義一個定時器,那定時器會越來越多,通過在返回函數(shù)中清除定時器取消這個副作用。useEffect返回函數(shù)的執(zhí)行時機(jī)是下一次useEffect執(zhí)行之前。
利用這一點(diǎn)可以實(shí)現(xiàn)防抖和節(jié)流函數(shù)
獲取數(shù)據(jù)
下面是在函數(shù)組件中獲取數(shù)據(jù)最基本的方式:
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 中獲取從后端請求回來的數(shù)據(jù),并使用 state hook 的更新函數(shù)在組件的本地狀態(tài)中設(shè)置數(shù)據(jù)。prmomise 解析發(fā)生在異步/等待中。
但是,當(dāng)你運(yùn)行應(yīng)用程序時,你會發(fā)現(xiàn)效果掛鉤在組件裝載時運(yùn)行,但在組件更新時也會運(yùn)行,這樣它就會一次又一次地獲取數(shù)據(jù)。這是一個錯誤,需要避免。我們只想在組件掛載時獲取數(shù)據(jù)。這就是為什么你可以提供一個空數(shù)組作為 effect hook 的第二個參數(shù),以避免在組件更新時激活它:
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;
第二個參數(shù)可用于定義鉤子所依賴的所有變量(在此數(shù)組中分配)。如果其中一個變量發(fā)生更改,則掛載將再次運(yùn)行。如果包含變量的數(shù)組為空,則在更新組件時根本不會運(yùn)行鉤子,因?yàn)樗槐乇O(jiān)視任何變量。
還有最后一個問題。在代碼中,我們使用 async/await 從第三方 API 獲取數(shù)據(jù)。而我們知道 async函數(shù)返回一個 AsyncFunction 對象。但是,effect hook 應(yīng)不返回任何內(nèi)容或清理函數(shù)。這就是為什么不允許直接在 effect hook 中使用異步的原因。讓我們通過調(diào)用effect 內(nèi)的異步函數(shù)來實(shí)現(xiàn)它的解決方法:
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 鉤子獲取數(shù)據(jù)。
到此這篇關(guān)于React Hooks獲取數(shù)據(jù)實(shí)現(xiàn)方法介紹的文章就介紹到這了,更多相關(guān)React Hooks內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
react 權(quán)限樹形結(jié)構(gòu)實(shí)現(xiàn)代碼
這篇文章主要介紹了react 權(quán)限樹形結(jié)構(gòu)實(shí)現(xiàn)代碼,項目背景react + ant design,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-05-05React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07使用React?Redux實(shí)現(xiàn)React組件之間的數(shù)據(jù)共享
在復(fù)雜的React應(yīng)用中,組件之間的數(shù)據(jù)共享是必不可少的,為了解決這個問題,可以使用React?Redux來管理應(yīng)用的狀態(tài),并實(shí)現(xiàn)組件之間的數(shù)據(jù)共享,在本文中,我們將介紹如何使用React?Redux實(shí)現(xiàn)Count和Person組件之間的數(shù)據(jù)共享,需要的朋友可以參考下2024-03-03React?split實(shí)現(xiàn)分割字符串的使用示例
當(dāng)我們需要將一個字符串按照指定的分隔符進(jìn)行分割成數(shù)組時,我們可以在組件的生命周期方法中使用split方法來實(shí)現(xiàn)這個功能,本文就來介紹一下,感興趣的可以了解下2023-10-10Ant Design與Ant Design pro入門使用教程
Ant Design 是一個服務(wù)于企業(yè)級產(chǎn)品的設(shè)計體系,組件庫是它的 React 實(shí)現(xiàn),antd 被發(fā)布為一個 npm 包方便開發(fā)者安裝并使用,這篇文章主要介紹了Ant Design與Ant Design pro入門,需要的朋友可以參考下2023-12-12