FullStackOpen: React Custom Hooks
教程:FullStackOpen2022 / Part 7 / 自定义 hooks 本文以 routed-anecdotes 应用为例。对应练习 7.4-7.6。 1. React Hooks React 提供了多种不同的 Hooks,其中最常用的是 useState 和 useEffect,又比如 useImperativeHandle,它允许组件向其他组件提供其功能。 Hook 不是普通的函数,在使用这些 Hooks 时,必须遵守某些规则或限制: 不要在循环、条件或嵌套函数中调用 Hooks。即,总是在 React 函数的顶层使用 Hooks。 不要从普通的 JavaScript 函数中调用 Hooks。即,可以从 React 函数组件调用,或从自定义 Hooks 中调用 Hooks。 有现有的 ESlint 规则 eslint-plugin-react-hooks 可以用来验证应用是否正确使用 Hooks。 更多信息可见:useHooks 2. Custom Hooks React 提供了创建自定义的 Custom Hooks 的选项。 Custom Hooks 的主要目的是促进组件中使用的逻辑的重用,可以使用任何其他 Hooks。Custom Hooks 需要遵守 React Hooks 的规则,此外,名称必须以 use 这个词开头。 表单的每个字段都有自己的状态。为了使表单的状态与用户提供的数据保持同步,必须为每个输入元素注册一个适当的onChange处理程序。下面让试着自定义 useField Hook 来简化表单的状态管理。...