Skip to main content

Hooks

一.Hook 简介

它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

1.动机

  • 在组件之间复用状态逻辑很难 使用 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构，这可能会很麻烦，使你的代码难以理解。如果你在 React DevTools 中观察过 React 应用，你会发现由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”。 Hook 使你在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。

  • 复杂组件变得难以理解 例如，组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。 多数情况下，不可能将组件拆分为更小的粒度，因为状态逻辑无处不在. Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。

  • class 的一些问题 this 的工作方式,这与其他语言存在巨大差异.

二.Hook 使用规则

Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：

  • 只在最顶层使用 Hook 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确

  • 只在 React 函数中调用 Hook 不要在普通的 JavaScript 函数中调用 Hook。你可以： ✅ 在 React 的函数组件中调用 Hook ✅ 在自定义 Hook 中调用其他 Hook (我们将会在下一页 中学习这个。)