4
头图

快来加入我们吧!

"小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验,请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习,及时获取最新文章。

"Code tailor" ,如果您对我们文章感兴趣、或是想提一些建议,微信关注 “小和山的菜鸟们” 公众号,与我们取的联系,您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励!

我们为什么要学 hooks

没有破坏性改动

  • hooks 是完全可选的 : 不需要重写任何代码就可以在组件中尝试 hook
  • 100%向后兼容的hook 不包含任何破坏性改动
  • 现在已经可以使用hook 发布于 React 16.8

动机

Hook 解决了我们五年来编写和维护成千上万的组件时遇到的各种各样看起来不相关的问题。无论你正在学习 React,或每天使用,或者更愿尝试另一个和 React 有相似组件模型的框架,你都可能对这些问题似曾相识。

  • 组件之间复用状态逻辑很难
  • 复杂的组件变得难以理解
  • 难以理解的 class

我们要怎么学 hooks

目前网络上有许多学习资料,React 官方学习网站 中的内容,讲述虽然详细,但是在例子上,较为复杂,不容易理解,而 阮一峰老师hooks 基础文章中,容易让我们上手,但是并不能让你对它有一个更深刻的认识,还有更多的在其他网站上的一些资料,大部分都是对官网进行的翻译或者部分内容进行提取,不能给你带来很多有用的资料。

而我们的 hooks 系列 提供了比官网更加简单的例子,比网络教材更加容易让人理解的简单教程,摘选了重点内容,让你们可以在短时间内对 hooks 有一个清晰的认识,以及熟练的掌握简单 hooks 的使用。

那么什么是 hooks

  • React 框架一直提倡使用 函数组件,但是这样会有一个问题,有时候需要使用 state 或者生命周期等其他功能时,有只能使用 类组件
  • hooksReact 16.8 新增的特性,它可以在不编写 类组件 的情况下使用 state 以及其他的 React 特性
  • 如果 函数组件 中添加一些 state,现在只需要在 函数组件 中使用 hooks 就可以完成操作,不需要在转化为 类组件
  • React API 中只要是以 use 开头的都是 hooks ,比如 useState

关于 hooks 的奥秘,快去系列文章中探索吧!

下节预告

在下节中,我们将正式开启 hooks 的学习旅途,敬请期待!


小和山的菜鸟们
377 声望2.1k 粉丝

每日进步的菜鸟,分享前端学习手册,和有心学习前端技术的小伙伴们互相探讨,一同成长。