勾點

  • 1 分鐘

勾點是架構中值變更或其他事件發生的常見模式。 在集中式的情況下，系統會插入您自己的程式碼，以在狀態變更時或在應用程式生命週期的其他階段執行。

效果勾點

在此單元中，我們將著重於「效果」勾點。 每當設定狀態值時，就會引發此勾點。 當初始值和所有後續更新都已設定時，就會引發此勾點。

效果勾點可讓您執行程式碼，以回應值的設定。 您執行的程式碼可能會有副作用，因此您可以視需要更新值。

使用效果勾點的時機

每當您需要集中程式碼以回應狀態變更時，就可以使用效果勾點。 想像一下包含許多值的複雜表單。 您通常應該停用提交按鈕，直到需要傳送到伺服器的資料處於有效狀態。 假設您有資料中已變更之個別值的事件。 當使用者選取您應用程式中的國家/地區之後，您必須從伺服器取出州/省清單。

您不希望每個事件接聽程式都檢查狀態，只為了查看資料是否已準備好傳送至伺服器。 這項設定會沒有效率。 相反地，您可以使用效果勾點。 效果勾點可以建立一個可查看資料的函式。 如果資料處於有效狀態，則可以啟用提交按鈕。

useEffect

若要註冊效果勾點的接聽程式，請使用 useEffect。 useEffect 接受不需要參數的函式，以在狀態變更時執行。

useEffect(() => {
    // code goes here
});

根據預設，每當任何具狀態物件的狀態變更時，就會執行 useEffect。 您可以提供相依性，僅針對特定物件群組啟用勾點。

useEffect(() => {
    // code goes here
}, [ someStatefulObject ]);