react hook 理解

162 阅读2分钟

简介

没有破坏性的改动

  • 完全可用 无需修改任何已有代码就可以在组件中使用hook
  • 100%向后兼容 不包含任何破坏性改动
  • 现在可用 hook发布于v16.8.0版本(2019年2月6日)我写这篇文章的时候,react已经到v16.13.1(2020年3月19号)

渐进式策略

没有计划从react中移除class,hook和现有代码可以同时工作,可以渐进式使用hook。 facebook做法:准备让 Hook 覆盖所有 class 组件的使用场景,但是我们将继续为 class 组件提供支持。在 Facebook,我们有成千上万的组件用 class 书写,我们完全没有重写它们的计划。相反,我们开始在新的代码中同时使用 Hook 和 class

Hook不会影响你对react的概念理解

hook为react概念提供了更直接的API:props state conetxt refs 以及生命周期。Hook还提供了一种更强大的方式组合他们

动机

  • 在组件之间复用状态逻辑很难
  • 复杂组件变的难以理解
  • 难以理解的Class(学习门槛高)

Hook概念

hook本质就是函数组件,在函数组件里面可以“钩入” React State props及生命周期等特性的函数。

使用规则

  • 不能在class组件中使用,意思是不用class也能正常使用react(不推荐把已有的组件全部重写,但可以在新组建里面使用hook)
  • 只在最顶层使用Hook不要在循环、条件、嵌套函数中调用hook 确保总是在 React 函数的最顶层调用hook,遵循这条规则,就能保证hook每一次渲染都按照同样的顺序被调用
  • 只在react函数中调用,不在普通的js函数中调用hook 在React的函数组件中调用Hook
    在自定义 Hook 中调用其他 Hook