react中hooks的理解与使用

这篇具有很好参考价值的文章主要介绍了react中hooks的理解与使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、作用

我们知道react组件有两种写法一种是类组件,另一种是函数组件。而函数组件是无状态组件,如果我们要想改变组件中的状态就无法实现了。为此,在react16.8版本后官方推出hooks,用于函数组件更改状态。

二、常用API

1、useState:存储变量和修改变量

用法:

有两个参数,第一个参数:状态中的属性。第二个参数:更改第一个参数属性值的回调函数。

react中hooks的理解与使用,react,react.js,javascript,前端

2、useeffect 

 给函数组件增加了操作副作用的能力,通俗说就是让你某方法在特定的时刻才会去执行,例如清除定时器

用法:

2-1、 两个参数。第一个参数:回调函数,第二个参数,是一个数组,里面存放执行回调函数的依赖,当为空数组时候,该回调函数在该组件中只会执行一次。

react中hooks的理解与使用,react,react.js,javascript,前端

2-2、 如果在useEffect第一个回调函数后加了一个return,那么return里面相当于类组件中的组件销毁生命周期,在return里可以写一些组件销毁时候要做的一些业务逻辑。

react中hooks的理解与使用,react,react.js,javascript,前端

2-3、 一个组件内可以写多个useEffect

react中hooks的理解与使用,react,react.js,javascript,前端

 2-4、和useLayoutEffect的区别

useLayoutEffect:在渲染页面前执行,会阻塞渲染。当要在渲染页面前操作dom时候应使用useLayoutEffect,否则用useEffect会出现页面抖动的情况。

useEffect:当组件页面渲染完,才会执行里面的逻辑。

3、useCallback(记忆函数)

当某个状态发生改变导致组件重新渲染时,为防止与该状态无关的其他函数重新被创建,使用useCallback方法

用法:

两个参数。第一个参数:被记忆的函数。第二个参数:是一个数组,里面放需要重新创建被记忆的函数的依赖。(例如。在点击修改name组件按钮重新渲染的时候,为了防止重新创建Add函数,我们可以给Add函数加useCallback,这样只有在第二个参数中num依赖发生改变的时候才会重新创建Add函数

react中hooks的理解与使用,react,react.js,javascript,前端

  4、useMemo (相当于vue中的计算属性)

两个参数。第一个参数:被记忆的函数。第二个参数:是一个数组,里面放需要重新计算的函数返回值的依赖。

useMemo 缓存的结果是回调函数中return回来的值,主要用于缓存计算结果的值,应用场景如需要计算的状态 useCallback 缓存的结果是函数,主要用于缓存函数

react中hooks的理解与使用,react,react.js,javascript,前端

 5、useRef 可以获取dom元素,还可以和useState一样存放变量。

react中hooks的理解与使用,react,react.js,javascript,前端

react中hooks的理解与使用,react,react.js,javascript,前端

6、useContext

可以帮助我们跨越组件层级直接传递变量,实现数据共享。

在react组件传值的博客中我们说到兄弟组件采用生产者和消费者。写起来很繁琐。

 react中hooks的理解与使用,react,react.js,javascript,前端

 react中hooks的理解与使用,react,react.js,javascript,前端

 react中hooks的理解与使用,react,react.js,javascript,前端

 而使用hooks中useContext就很方便了,包裹组件的父组件代码基本没变化,主要消费者获取值很方便了,如下图

react中hooks的理解与使用,react,react.js,javascript,前端

 react中hooks的理解与使用,react,react.js,javascript,前端

 react中hooks的理解与使用,react,react.js,javascript,前端

7、useReducer 管理各个组件公共状态 一般与useContext结合使用

用法:

该方法接受两个参数。第一个参数:reducer,第二个参数:默认state,通过解构获取useReducer中的state和dispatch。

完整代码如下:

import React,{useContext,useReducer} from "react"
const defaultState  = {
    a:'111',
    b:'111'
}
const reducer = (state,action)=>{
    let newState = {...state}
    switch (action.type){
        case 'CHANGE-A':
            newState.a = action.value
            return newState
        case 'CHANGE-B':
            newState.b = action.value
            return newState
    }
    return state
}
const Global = React.createContext(null)
export default function FnReducer(){
    // 通过解构获取useReducer中的state和dispatch方法
    const [state,dispatch] = useReducer(reducer,defaultState)
    return(
    <Global.Provider value={
        {state,dispatch}
    }>
         <div >
            <Chilid1 />
            <Chilid2 />
            <Chilid3 />
        </div>
    </Global.Provider>
    )
}
function Chilid1(){
    const {dispatch} = useContext(Global)
    return(
        <div>
            <button onClick={()=>{
                dispatch({
                    type:'CHANGE-A',
                    value:'222'
                })
            }}>改变a</button>
            <button onClick={()=>{
                dispatch({
                    type:'CHANGE-B',
                    value:'333'
                })
            }}>改变b</button>
        </div>
    )
}
function Chilid2(){
    const {state} = useContext(Global)
    return(
        <div>
            {state.a}
        </div>
    )
}
function Chilid3(){
    const {state} = useContext(Global)
    return(
        <div>
            {state.b}
        </div>
    )
}

8、自定义hooks

为了让代码逻辑看起来结构清晰。我们可以把每个组件重复的逻辑单独抽出来,然后封装一个函数 然后return出来,只不过这个函数名必须以use开头。

以上就是hooks的理解与使用。文章来源地址https://www.toymoban.com/news/detail-640204.html

到了这里,关于react中hooks的理解与使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端知识】React 基础巩固(四十三)——Effect Hook

    Effect Hook 用来完成一些类似class中生命周期的功能。 在使用类组件时,不管是渲染、网路请求还是操作DOM,其逻辑和代码是杂糅在一起的。例如我们希望把计数器结果显示在标签上,在类组件中,我们通过生命周期进行实现,如下所示: 在函数组件中,我们可以利用useEffec

    2024年02月14日
    浏览(67)
  • 前端react入门day04-useEffect与Hook函数

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 useEffect 的使用 useEffect 的概念理解 useEffect 依赖项参数说明 useEffect — 清除副作用 自定义Hook实现 React Hooks使用规则 useEffect是一个React Hook函数,用于在React组件中 创建不

    2024年01月22日
    浏览(53)
  • 前端开发笔记 | React Hooks子组件和父组件交互

    前端开发框架目前比较常用的就是react、vue等,其中使用React Hooks 带来了不少的好处,今天来聊聊React Hooks开发方式下,子组件和父组件的交互。 子组件定义 父组件调用子组件 父组件定义 子组件中刷新父组件按钮文案 实际效果:点击子组件中“改变父组件按钮”,父组件中

    2024年02月11日
    浏览(81)
  • 【前端知识】React 基础巩固(四十六)——自定义Hook的应用

    自定义Hook本质上只是一种函数代码逻辑的抽取,严格意义上而言,它并不算React的特性。 实现组件创建/销毁时打印日志 实现Context共享 封装 TokenContext 和 UserContext 两个Context在自定义Hook useUserToken 中,通过使用 userUserToken 同时获取两个Context的内容: 实现获取滚动位置 封装滚

    2024年02月14日
    浏览(44)
  • 前端实现简单的sse封装(React hook Vue3)

    所谓的SSE(Sever-Sent Event),就是浏览器向服务器发送了一个HTTP请求,保持长连接,服务器不断单向地向浏览器推送“信息”,这么做是为了节省网络资源,不用一直发请求,建立新连接。 优点:SSE和WebSocket相比,最大的优势是便利,服务端不需要第三方组件,开发难度低,SSE和

    2024年02月09日
    浏览(44)
  • 【前端知识】React 基础巩固(四十四)——其他Hooks(useContext、useReducer、useCallback)

    在类组件开发时,我们通过 类名.contextType = MyContext 的方式,在类中获取context,多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context: 可以看到,当我们需要使用多个Context时,存在大量繁琐的嵌套代码;而Context Hook能够让我们通过Hook直接获取某个Context的值,如

    2024年02月14日
    浏览(46)
  • 【前端灵魂脚本语言JavaScript⑤】——JS中数组的使用

    🐚 作者: 阿伟 💂 个人主页: Flyme awei 🐋 希望大家多多支持😘一起进步呀! 💬 文章对你有帮助👉关注✨点赞👍收藏📂 第一种: var 数组名 = new Array(); 创建一个空数组 第二种: var arr2 = new Array(10); 创建一个定长为10的数组 第三种 var arr3 = new Array(a,b,c); 创建时直接指定元素值

    2023年04月08日
    浏览(57)
  • 如何使用前端框架(React、Angular、Vue.js等)?该如何选择?

    聚沙成塔·每天进步一点点 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而

    2024年02月07日
    浏览(56)
  • 前端基本功 用 React Hooks + Antd 实现一个 Todo-List

    To-do list(待办事项列表)是用来记录和管理要完成的任务、活动或项目的列表。它是一种简单而常见的工具,用于帮助人们组织和安排日常生活中的任务。每当您有一项任务需要完成或者要记住某些事情时,您可以将它添加到待办事项列表中。 学习前端的一些新知识时,经

    2024年02月17日
    浏览(34)
  • 【实战】 TS 应用:JS神助攻 - 强类型 —— React17+React Hook+TS4 最佳实践,仿 Jira 企业级项目(三)

    学习内容来源:React + React Hook + TS 最佳实践-慕课网 相对原教程,我在学习开始时(2023.03)采用的是当前最新版本: 项 版本 react react-dom ^18.2.0 react-router react-router-dom ^6.11.2 antd ^4.24.8 @commitlint/cli @commitlint/config-conventional ^17.4.4 eslint-config-prettier ^8.6.0 husky ^8.0.3 lint-staged ^13.1.2 p

    2024年02月09日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包