為什么我們必須use在自定義鉤子之前使用。這只是一個命名約定，還是 React 在內部做了一些特殊的事情？
為什么它給出了一個錯誤。由于自定義鉤子只是一個普通函式，我們可以在其中使用其他鉤子。以下是 React 檔案中的規則。
與 React 組件不同，自定義 Hook 不需要具有特定簽名。我們可以決定它接受什么作為引數，以及它應該回傳什么（如果有的話）。換句話說，它就像一個正常的功能。它的名稱應該始終以use開頭，以便您一眼就可以看出 Hooks 的規則適用于它。
useCustomHook: with use Prefix
import { useState } from "react";
export default function useCustomHook(initialValue) {
const [value, setValue] = useState(initialValue);
function changeValue() {
setValue((v) => v 100);
}
return [value, changeValue];
}
customHook: without use Prefix
import { useState } from "react";
export default function customHook(initialValue) {
const [value, setValue] = useState(initialValue);
function changeValue() {
setValue((v) => v 100);
}
return [value, changeValue];
}
uj5u.com熱心網友回復：
這只是一個命名約定。
但是，這些檔案具有非常輕微的誤導性：
換句話說，它就像一個正常的功能。
它就像一個普通函式，但有額外的包袱，與普通函式不同，在作為自定義鉤子的函式內部，您可以在其中呼叫其他鉤子 - 如果您嘗試在背景關系之外將其作為普通函式呼叫的 React，并且它在內部使用鉤子，它會失敗。
您參考的部分說明了為什么命名約定是這樣的：
它的名稱應該始終以 use 開頭，以便您一眼就可以看出 Hooks 的規則適用于它。
這樣，一目了然，它是一個必須遵循規則的鉤子呼叫組件，而不是一個不呼叫鉤子的組件。
想象
const MyComponent = ({ checkThing }) => {
if (checkThing) {
verifyThing();
}
verifyThing如果是自定義鉤子，上面將是無效代碼。如果它被重命名為遵循檔案和 linter 推薦的約定：
const MyComponent = ({ checkThing }) => {
if (checkThing) {
useVerifyThing();
}
很明顯，有一個問題，甚至不必知道什么verifyThing/useVerifyMean意味著或做什么。這是自定義鉤子前綴的主要好處use- 它告訴您和鉤子的其他用戶應該始終在功能組件的主體中無條件地呼叫它，這比在某處弄亂它并在其他地方意外呼叫它更有用必須從運行時錯誤向后作業才能修復它。
uj5u.com熱心網友回復：
這只是來自eslint-plugin-react-hooks插件的 ESLint 規則。
與所有 linter（靜態分析）規則一樣，該規則是幫助您生成可維護、可理解的代碼的指南。它不在編譯或運行時強制執行。
例如，如果你只是禁用 linter，你會發現你的應用程式運行沒有錯誤
const [value, setValue] = useState(initialValue); // eslint-disable-line react-hooks/rules-of-hooks
uj5u.com熱心網友回復：
這是與其他語言一樣的規則，例如在 rust 或 c 中，我們必須在代碼末尾使用分號，所以這是一個反應鉤子，當我們使用它時，它必須以大寫字母開頭，但第二個是 javascript 函式并且沒有該規則
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/498323.html
標籤：javascript 反应 埃斯林特