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 "}]}]}