react学习—了解Hook

最新推荐文章于 2024-02-29 15:50:10 发布
最新推荐文章于 2024-02-29 15:50:10 发布
阅读量149 收藏
点赞数
分类专栏： react学习 文章标签： react Hook
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xun__xing/article/details/116892415
版权

了解Hook

一、HOOK简介

HOOK是React16.8.0之后出现

组件：无状态组件（函数组件）、类组件

类组件中的麻烦：

  1. this指向问题

  2. 繁琐的生命周期

  3. 其他问题

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

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

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

HOOK种类：

  1. useState
  2. useEffect
  3. 其他…

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！

飞羽逐星
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用于WebSocket通信的React Hook-React开发
05-27
在StackBlitz中进行测试React Hook旨在为您的React组件提供强大的WebSocket集成。 对SocketIO的实验性支持（有关更多信息，请参见下面的文档）欢迎请求请求！ v2中的新增功能useWebSocket现在返回一个对象，而不是
react hook使用分享
10-13
React Hook 使用分享 React Hook 是 React 框架中的一种新式状态管理方案，旨在解决逻辑复用问题。下面是对 React Hook 的使用分享，包括为什么要用 Hook、Hook 与其他方案的对比、Hook 的使用技巧等。 一、为什么...
React的有状态组件和无状态组件
usernameID007的博客
08-03 289
React的有状态组件和无状态组件，有状态组件与无状态组件的 优缺点的比较
快速了解 React Hooks 原理
粉丝们务必加入微信粉丝群
08-19 2296
作者：Dave Ceddia 译者：前端小智 为了保证的可读性，本文采用意译而非直译。 我们大部分 React 类组件可以保存状态，而函数组件不能？并且类组件具有生命周期，而函数组件却不能？ React 早期版本，类组件可以通过继承PureComponent来优化一些不必要的渲染，相对于函数组件，React 官网没有提供对应的方法来缓存函数组件以减少一些不必要的渲染，直接 16...
react学习—ref Hook
xun__xing的博客
05-23 816
ref Hook一、ref Hook 一、ref Hook useRef函数： 一个参数：默认值 返回一个固定的对象，{current: 值} import React, { createRef, useState } from 'react' export default function App() { const inpRef = createRef; const [n, setN] = useState(0); return ( <div> <input re
React 18.0 新增Hook
最新发布
Misnice的博客
02-29 383
useSyncExternalStore（18.0新增）useInsertionEffect（18.0新增）useDeferredValue（18.0新增）useDebugValue（18.0新增）useTransition（18.0新增）useId（18.0新增）
react-media-hook:React挂钩的媒体查询
04-28
yarn add react-media-hook 或使用npm： npm i react-media-hook --save 用法 将查询传递给useMediaPredicate ： import React from "react" ; import { useMediaPredicate } from "react-media-hook" ; const ...
React Hook 强制您的功能组件更新。
06-08
useForceUpdate useForceUpdate 是一个 React Hook，它强制您的函数组件重新渲染。 useForceUpdate 本身没有任何用途。 它是一个小包，旨在集成到更大的钩子中，使仍然依赖 this.forceUpdate() 的任何类功能过时。 ...
react-Reacthook用于创建QRCode数据URL
08-14
React hook用于创建QR Code数据URL
react学习—渲染过程（首次渲染）
xun__xing的博客
05-15 1041
渲染过程一、渲染过程1、渲染原理2、首次渲染(新节点渲染) 一、渲染过程 1、渲染原理 渲染：生成用于显示的对象，以及将这些对象形成真实的DOM对象 React元素：React Element，通过React.createElement创建（语法糖：JSX） 例如： <div><h1>标题</h1></div> <App /> React节点：专门用于渲染到UI界面的对象，React会通过React元素，创建React节点，ReactD
react学习—边界错误
xun__xing的博客
05-14 714
边界错误一、边界错误1、使用错误边界 一、边界错误 默认情况下，若一个组件在渲染期间（render）发生错误，会导致整个组件树全部被卸载 import React from 'react' import ErrorBound from "./components/common/ErrorBound" function Comp1() { return <div style={{ width: "90%", height: 500, border
react学习—DebugValueHook
xun__xing的博客
11-28 696
DebugValueHook一、DebugValueHook 一、DebugValueHook useDebugValue：用于将自定义Hook的关联数据显示到调试栏 function useTest(){ const [students, ] = useState([]) return students; } export default function App() { useState(0) useState("abc") useEffect(() =>
react学习—Reducer Hook
xun__xing的博客
05-17 651
Reducer Hook一、Reducer Hook 一、Reducer Hook Flux：Facebook出品的一个数据流框架 规定了数据是单向流动的 数据存储在数据仓库中（目前，可以认为state就是一个存储数据的仓库） action是改变数据的唯一原因（本质上就是一个对象，action有两个属性） type：字符串，动作的类型 payload：任意类型，动作发生后的附加信息 例如，如果是添加一个学生，action可以描述为： { type:"addStudent", payload: {学生对
react学习—ref转发
xun__xing的博客
05-05 627
ref转发一、ref转发1、函数组件转发2、类组件转发3、实例 一、ref转发 前面我们将ref时提到了，ref并不能作用于函数组件，因为react觉得函数组件只返回一个dom并没有多大意义。那么如果我们一定要对函数组件使用ref怎么办呢？ 1、函数组件转发 import React, { Component } from 'react' function A(props) { return ( <div> <span>{props.words}</s
react学习—属性默认值和类型验证
xun__xing的博客
04-25 618
属性默认值和类型验证一、属性默认值1、函数组件属性默认值2、类组件默认属性值二、属性类型验证1、常见值类型2、是否必传isRequired3、其它类型验证4、自定义验证 一、属性默认值 通过一个静态属性defaultProps告知react属性默认值 1、函数组件属性默认值 //FuncDefault.js import React from 'react' export default function FuncDefault(props) { return ( <div>
react学习—Callback Hook
xun__xing的博客
05-18 542
Callback Hook一、Callback Hook 一、Callback Hook 函数名：useCallback 用于得到一个固定引用值的函数，通常用它进行性能优化 useCallback: 该函数有两个参数： 函数，useCallback会固定该函数的引用，只要依赖项没有发生变化，则始终返回之前函数的地址 数组，记录依赖项 该函数返回：引用相对固定的函数地址 例： //App.js import React, { useState } from 'react' class Test exten
react学习—PureComponent纯组件
xun__xing的博客
05-14 533
PureComponent纯组件一、PureComponent纯组件1、任务列表2、添加任务3、性能优化1.使用PureComponent 一、PureComponent纯组件 纯组件用于避免不必要的渲染（render函数），提高效率 1、任务列表 //Task.js import React, { Component } from 'react' import PropTypes from "prop-types" import './Task.css' export default class Tas
react学习—Effect Hook
xun__xing的博客
05-16 442
Effect Hook一、Effect Hook2、细节 一、Effect Hook Effect Hook：用于在函数组件中处理副作用 副作用： ajax请求 计时器 其他异步操作 更改真实DOM对象 本地存储 其他会对外部产生影响的操作 import React,{useState,useEffect} from 'react' export default function App() { const [n,setN] = useState(0); //改变网页标题就属于副作用，所以在E
react 自定义hook如何学习
05-10
4. Hook最佳实践：学习React社区中已有的Hook库，了解在实际项目中如何应用Hook最佳实践。 以下是一些学习React自定义Hook的资源： 1. 官方文档：React官方文档中有关于Hook的详细介绍和使用示例。 2. React Hook...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞羽逐星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值