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-native中路由页面的跳转与传参的实例详解

    react-native中路由页面的跳转与传参的实例详解

    这篇文章主要介绍了react-native中路由页面的跳转与传参,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • React Hooks之useRef获取元素示例详解

    React Hooks之useRef获取元素示例详解

    这篇文章主要介绍了React Hooks之useRef获取元素示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • React受控组件与非受控组件详细介绍

    React受控组件与非受控组件详细介绍

    具体来说这是一种react非受控组件,其状态是在input的react内部控制,不受调用者控制。可以使用受控组件来实现。下面就说说这个React中的受控组件与非受控组件的相关知识,感兴趣的朋友一起看看吧
    2022-09-09
  • React 之 Suspense提出的背景及使用详解

    React 之 Suspense提出的背景及使用详解

    这篇文章主要为大家介绍了React 之 Suspense提出的背景及使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • React Native开发封装Toast与加载Loading组件示例

    React Native开发封装Toast与加载Loading组件示例

    这篇文章主要介绍了React Native开发封装Toast与加载Loading组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React中DOM事件和状态介绍

    React中DOM事件和状态介绍

    这篇文章主要介绍了React中DOM事件和状态介绍,文章围绕主题展开详细的内容介绍,具有一定的参考价值,感兴趣的小伙伴可以参考一下
    2022-08-08
  • react中props 的使用及进行限制的方法

    react中props 的使用及进行限制的方法

    这篇文章主要介绍了react中的props 的使用及进行限制的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • React 首页加载慢问题性能优化案例详解

    React 首页加载慢问题性能优化案例详解

    这篇文章主要介绍了React 首页加载慢问题性能优化案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • 基于webpack4.X从零搭建React脚手架的方法步骤

    基于webpack4.X从零搭建React脚手架的方法步骤

    这篇文章主要介绍了基于webpack4.X从零搭建React脚手架的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • webpack打包react项目的实现方法

    webpack打包react项目的实现方法

    这篇文章主要介绍了webpack打包react项目的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06

最新评论