React之Hooks详解

 更新时间:2021年09月26日 15:24:51   作者:夹心776655  
这篇文章主要介绍了React hooks的优缺点详解,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下, 希望能够给你带来帮助

什么是钩子(hooks)

  • 消息处理的一种方法, 用来监视指定程序
  • 函数组件中需要处理副作用,可以用钩子把外部代码“钩”进来
  • 常用钩子:useState, useEffect, useContext, useReducer
  • Hooks一律使用use前缀命名:useXXX

类组件

在这里插入图片描述

函数组件

在这里插入图片描述

一类特殊的函数,为你的函数式组件注入特殊的功能

为什么创造Hooks

  • 有些类组件冗长且复杂,难以复用
  • 结局方案:无状态组件与HOC(高阶组件),但还是存在诸多问题

无状态组件无法访问异步API, 无法进行更新

HOC: 组件嵌套达到复用目的,增加组件的复杂性

  • Hooks的目的是给函数式组件添加状态
  • 生命周期函数会同时处理多项任务:发起ajax、跟踪数据状态、绑定事件监听
  • 函数式组件则轻量化很多,使用Hooks钩子来钩入组件状态

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • React diff算法的实现示例

    React diff算法的实现示例

    这篇文章主要介绍了React diff算法的实现示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • React18+TS通用后台管理系统解决方案落地实战示例

    React18+TS通用后台管理系统解决方案落地实战示例

    这篇文章主要为大家介绍了React18+TS通用后台管理系统解决方案落地实战示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 基于React实现下拉刷新效果

    基于React实现下拉刷新效果

    这篇文章主要介绍了如何基于react实现下拉刷新效果,在下拉的时候会进入loading状态,文中有详细的代码示例供大家参考,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-03-03
  • 探究react-native 源码的图片缓存问题

    探究react-native 源码的图片缓存问题

    本篇文章主要介绍了探究react-native 源码的图片缓存问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • React 父子组件通信的实现方法

    React 父子组件通信的实现方法

    这篇文章主要介绍了React 父子组件通信的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • React Draggable插件如何实现拖拽功能

    React Draggable插件如何实现拖拽功能

    这篇文章主要介绍了React Draggable插件如何实现拖拽功能问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • React组件化的一些额外知识点补充

    React组件化的一些额外知识点补充

    React是一个用于构建用户界面的JavaScript库,下面这篇文章主要给大家介绍了关于React组件化的一些额外知识点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • React Hooks--useEffect代替常用生命周期函数方式

    React Hooks--useEffect代替常用生命周期函数方式

    这篇文章主要介绍了React Hooks--useEffect代替常用生命周期函数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • React中用@符号编写文件路径实现方法介绍

    React中用@符号编写文件路径实现方法介绍

    在Vue中,我们导入文件时,文件路径中可以使用@符号指代src目录,极大的简化了我们对路径的书写。但是react中,要想实现这种方式书写文件路径,需要写配置文件来实现
    2022-09-09
  • 基于React实现搜索GitHub用户功能

    基于React实现搜索GitHub用户功能

    在本篇博客中,我们将介绍如何在 React 应用中搜索 GitHub 用户并显示他们的信息,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-02-02

最新评论