本文會介紹如何在React中使用Hooks, 自從2018年1月以來，Hooks的引入為React項目的開發者提供了一種編寫乾淨代碼的極好機制。接下來我們就看看如何使用這項技術。

我們先假定我們已經編寫了一個函數類型的組件，我們就在這個組件中使用Hooks.

首先你需要引入對應函數：

import React, { useState, useEffect } from ‘react’;

接下來是例子代碼演示：

const [data, setData] = useState([]);

const [loading, setLoading] = useState(true);

在這個例子中我們定義了兩個Hooks,每個Hooks包含一個getter, 一個setter。

我們先看如何使用setter：

useEffect(() => {

axios.get(`/api/WeatherForecast`)

.then(res => {

console.log(res.data);

setData(res.data);

setLoading(false);

}

).catch((error) => {

// handle error

console.log(error);

setLoading(false);

});

}, []);

在上面代碼中，我們在數據獲取以後使用setter來更改數據狀態。

在模板中使用getter來顯示數據：

return (

);

在上面的例子中，我們使用了useEffect來觸發數據加載。數據加載完成以後，我們更新數據的狀態，隨後UI顯示最新的數據。

整個程序運行的過程如下：

顯示等待狀態；

數據加載完成後，取消等待顯示；

顯示最新加載數據；

閱讀更多 丁哥開講 的文章

關鍵字: useEffect setter 函數