ReactHook 关于依赖项的说明

Bertha 。 2021-07-25 02:08 476阅读 0赞

1、当使用hooks时,依赖项改变才触发hooks的改变是指(依赖项的其中一个改变):
    	依赖项更新:重新创建hooks内函数,将函数内的所有状态更新为当前的最新值
    	
    	依赖项不更新:函数会一直缓存,即内部的状态值是第一次创建后的状态值,和整个函数组件的状态值不同步	
    		场景:在不依赖的函数中,依旧可以设置状态,即做一些不需要依赖最新状态的操作(如设置某个状态一直为true)
    
    2、当依赖项是普通变量时(非useState)改变依赖项:
    	该变量会被缓存,所在的函数不会被刷新(useState的值不变),只有该变量的值会变成最新值
    
    3、当使用useReducer时,使用state.属性作为依赖项会刷新函数,否则会一直缓存函数(获取的state不变),但可以设置reducer新状态
    	
    4、当直接通过=赋值改变useState的变量时,不会重新渲染组件,但会同步改变state的值,和类中的直接赋值state同理
    
    5、依赖项不一定得是useState的变量,props等也行
    
    6、当引用的地址不变时,重新设置state会刷新变量,但不会刷新界面(如arr.push),解决方案[...arr]
    
    7、当某一个依赖项更新时,将会刷新该hook,但该hook内的其他hook依赖项未更新时,不会刷新其他hook

代码示例:

const _onClick = useCallback(() => { 
        console.log('ccc');
        console.log(sliding)
        setSliding(true);
        setValue2(8);
        setValue(2);
    
      },[])
    	
      //当不指定依赖项时,_onClick2内部的状态一直是初始状态,不会和_onClick调用后的状态同步,指定了其中一个依赖项就会同步状态
      const _onClick2 = useCallback(() => { 
          console.log(currentValue);
          console.log(currentValue2);
    
      },[])

发表评论取消回复

表情：

评论列表（有 0 条评论，476人围观）

还没有评论，来说两句吧...

相关阅读

相关无法移除‘setuptools‘依赖项：探索conda依赖项的重要性

无法移除’setuptools’依赖项：探索conda依赖项的重要性在使用conda管理Python环境时，有时可能会遇到无法卸载某个依赖项的情况。其中一个常见的错误是’R

迷南。/ 2024年03月26日 20:39/ 0 赞/ 89 阅读

相关关于数据库缓存依赖项的使用

SqlCacheDependency基于表的缓存应用在sql2000,以及slq20005中实现的原理多一样,多是在需要检测的表上建立触发器,并且Asp.net运行时通过轮

心已赠人/ 2021年12月24日 06:17/ 0 赞/ 250 阅读

相关 ReactHook 关于依赖项的说明

1、当使用hooks时,依赖项改变才触发hooks的改变是指(依赖项的其中一个改变): 依赖项更新:重新创建hooks内函数,将函数内的所有状态更新为当前的最

Bertha 。/ 2021年07月25日 02:08/ 0 赞/ 477 阅读

相关 ReactHook StateHook

Hook使得函数组件能使用state以及类组件其他特性 1、引入 import React, { Component,useState } from

柔情只为你懂/ 2021年07月25日 01:54/ 0 赞/ 387 阅读

相关 ReactHook RefHook

(1)除了可以进行ref操作以外,还能进行数据存储的操作,即相当于在函数式组件中拥有了this (2)ref的改变不会引起组件的重新渲染 1、

短命女/ 2021年07月24日 21:49/ 0 赞/ 382 阅读

相关 ReactHook CallbackHook

用于改善回调函数,当依赖项更新时才会重新渲染返回新的函数除了第一次以外,只有当依赖项更新才能重新触发函数主要是对函数进行缓存 1、

小鱼儿/ 2021年07月24日 21:21/ 0 赞/ 430 阅读

相关 ReactHook ContextHook

和context作用相同,可以解决多层组件传递参数 1、引入 import React, {Component,useContext } f

青旅半醒/ 2021年07月24日 19:06/ 0 赞/ 410 阅读

相关 ReactHook MemoHook

类似Vue的计算属性,当依赖项中的useState的数据改变,重新渲染函数时, 会重新调用函数,返回新的值,否则会一直使用缓存的旧值主要是对返回结果进

青旅半醒/ 2021年07月24日 16:05/ 0 赞/ 457 阅读

相关 ReactHook ReducerHook

触发dispatch方法后会刷新函数组件 1、创建action-type.js文件用途: 用来放置action的t

淡淡的烟草味﹌/ 2021年07月24日 14:26/ 0 赞/ 397 阅读

相关 ReactHook EffectHook

副作用操作,使得函数组件能够进行生命周期的操作,可以有多个,类组件中相同的生命周期会进行覆盖可以看作是以下生命周期函数的结合: compo

桃扇骨/ 2021年07月24日 12:25/ 0 赞/ 398 阅读