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.其他…

相关文章
|
8月前
|
前端开发 JavaScript 算法
第一章 react简介
第一章 react简介
|
5月前
|
前端开发 JavaScript
React的生命周期简介(十)
【8月更文挑战第15天】React的生命周期简介
58 2
|
5月前
|
前端开发 JavaScript 中间件
React脚手架create-react-app简介
【8月更文挑战第13天】React脚手架create-react-app简介
305 4
|
5月前
|
前端开发
React 中的 Hook 概念
【8月更文挑战第31天】
49 0
|
5月前
|
前端开发 JavaScript 算法
React——React简介和基本使用【一】
React——React简介和基本使用【一】
63 0
|
6月前
|
前端开发
React useImperativeHandle Hook
【7月更文挑战第1天】React useImperativeHandle Hook
38 3
|
6月前
|
前端开发 JavaScript 数据格式
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
125 1
|
6月前
|
前端开发
Vue3 【仿 react 的 hook】封装 useTitle
Vue3 【仿 react 的 hook】封装 useTitle
66 0
|
6月前
|
前端开发 API
Vue3 【仿 react 的 hook】封装 useLocation
Vue3 【仿 react 的 hook】封装 useLocation
50 0
|
8月前
|
存储 JavaScript 前端开发
React中的Redux:简介和实例代码
React中的Redux:简介和实例代码
95 1