6個React Hook最佳實踐技巧

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/wechat\/images\/bb\/bb7c3c33bcd1efdeba5802f60c487f6d.jpeg","alt":null,"title":null,"style":null,"href":null,"fromPaste":false,"pastePass":false}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本文最初發佈於 Medium 網站，經原作者授權由 InfoQ 中文站翻譯並分享。"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在過去，像狀態和生命週期函數這樣的 React 特性只適用於基於類的組件。基於函數的組件被稱爲啞（dumb）、瘦（skinny）或表示（presentational）組件，因爲它們無法訪問狀態和生命週期函數。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"但是自從 React Hooks 發佈以來，基於函數的組件已升格爲 React 的一等公民。它使函數組件能夠以新的方式編寫、重用和共享 React 代碼。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在這篇文章中，我將分享 6 個關於 React Hooks 的技巧。你可以把它當作一份指南，在將 Hooks 實現到組件中時可以拿來參考。"}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"遵守 Hooks 規則"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這條規則看起來是句廢話，但無論是新手還是經驗豐富的 React 開發人員，都常常會忘記遵循 React Hooks 的規則。這些規則包括："}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"僅在頂級調用 Hooks "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不要在循環、條件和嵌套函數內調用 Hooks。當你想有條件地使用某些 Hooks 時，請在這些 Hooks 中寫入條件。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不要這樣做："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"if (name !== '') {\n useEffect(function persistForm() {\n localStorage.setItem('formData', name);\n });\n}"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"相比之下，你應該這樣做："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"useEffect(function persistForm() {\n if (name !== '') {\n localStorage.setItem('formData', name);\n }\n});"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"這條規則能確保每次渲染組件時都以相同的順序調用 Hooks。這樣一來，React 就能在多個 useState 和 useEffect 調用之間正確保留 Hooks 的狀態。"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"僅從函數組件調用 Hooks "}]}]}