react 之 HOOK 简介

简介: hook 是啥,中文翻译叫做 钩子, 用来增强函数组件的功能,因为函数组件是在react16.8以前是没有状态的,但是函数组件又比较纯粹和简单(使用上),所以react 应社区和自身考虑,设计了hook来增强函数组件。但是在未来官方好像要让hook 和 class 共存。 相反,我们开始在新的代码中同时使用 Hook 和 class。

含义


hook 是啥,中文翻译叫做 钩子, 用来增强函数组件的功能,因为函数组件是在react16.8以前是没有状态的,但是函数组件又比较纯粹和简单(使用上),所以react 应社区和自身考虑,设计了hook来增强函数组件。但是在未来官方好像要让hook 和 class 共存。 相反,我们开始在新的代码中同时使用 Hook 和 class。


出现的原因


HOOK是React16.8.0之后出现


组件:无状态组件(函数组件)、类组件


类组件中的麻烦:


  • this指向问题
  • 繁琐的生命周期
  • 其他问题


作用


HOOK专门用于增强函数组件的功能(HOOK在类组件中是不能使用的),使之理论上可以成为类组件的替代品


官方强调:没有必要更改已经完成的类组件,官方目前没有计划取消类组件,只是鼓励使用函数组件


20210331074159536.png


HOOK(钩子)本质上是一个函数(命名上总是以use开头),该函数可以挂载任何功能


20210331074229517.png


分类


1.useState

2.useEffect

3.其他…

相关文章
|
1月前
|
前端开发 JavaScript 算法
第一章 react简介
第一章 react简介
|
1月前
|
前端开发 JavaScript
【边做边学】React Hooks (二)——useEffect Hook
【边做边学】React Hooks (二)——useEffect Hook
|
1月前
|
前端开发 JavaScript
React中useEffect Hook使用纠错
React中useEffect Hook使用纠错
23 0
|
1月前
|
前端开发 JavaScript
React 简介与环境搭建
【1月更文挑战第1天】React 简介与环境搭建
32 0
|
1月前
|
自然语言处理 前端开发 JavaScript
说说你对 React Hook的闭包陷阱的理解,有哪些解决方案?
说说你对 React Hook的闭包陷阱的理解,有哪些解决方案?
65 0
|
6月前
|
前端开发 JavaScript 算法
【React学习】—React简介(一)
【React学习】—React简介(一)
|
6月前
|
自然语言处理 前端开发 JavaScript
美丽的公主和它的27个React 自定义 Hook(四)
美丽的公主和它的27个React 自定义 Hook(四)
|
6月前
|
存储 前端开发 数据可视化
美丽的公主和它的27个React 自定义 Hook(三)
美丽的公主和它的27个React 自定义 Hook(三)
|
6月前
|
存储 JSON 前端开发
美丽的公主和它的27个React 自定义 Hook(二)
美丽的公主和它的27个React 自定义 Hook(二)
|
6月前
|
前端开发 JavaScript API
美丽的公主和它的27个React 自定义 Hook(一)
美丽的公主和它的27个React 自定义 Hook(一)