简介
没有破坏性的改动
- 完全可用 无需修改任何已有代码就可以在组件中使用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