关于react中useCallback的用法

目录
  • 基础用法
  • 父组件
  • 子组件

useCallback是react中比较重要的一个hook

useCallback 用来返回一个函数，在父子组件传参或者通用函数封装中,起到举足轻重的作用。

基础用法

useCallback的用法与useState的用法基本一致，但最后会返回一个函数，用一个变量保存起来。

返回的函数a会根据b的变化而变化，如果b始终未发生变化，a也不会重新生成，避免函数在不必要的情况下更新。

记得子组件导出时使用memo包裹一下，其作用是对组件前后两次进行浅对比，阻止不必要的更新

const a = useCallback(() => {
    return function() {
        console.log(b)
    }
},[b])
console.log(a)
console.log(a())

第一种用法，父子组件函数式传参

既然使用useCallback减少了函数式参数不必要的更新，子组件收到的参数不变，自然也不会更新，从而减少了组件间不必要的更新。

父组件

import React, { useState, useEffect, useCallback, useRef } from 'react';
import CC from './cc';
const Props: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const [p, setP] = useState('1');
  const [ccVisible, setCCVisible] = useState(false);
  console.log('-- Props --');
  const onClick = useCallback(() => {
    console.log('onClick');
    setCCVisible(true);
  }, []);
  const onClose = useCallback(() => {
    console.log('onClose');
    setCCVisible(false);
  }, []);
  useEffect(() => {
    setTimeout(() => {
      setP('2');
      setLoading(false);
    }, 1000);
  }, []);
  if (loading) {
    return <div>loading</div>;
  }
  return (
    <div>
      <p>
        <span onClick={onClick2}>ddd</span>
      </p>
      <CC visible={ccVisible} onClick={onClick} onClose={onClose} text={p} />
    </div>
  );
};
export default Props;

子组件

import React, { useState, useEffect, memo } from 'react';
import { Modal } from 'antd';
interface CCProps {
  visible: boolean;
  text: string;
  onClick: () => void;
  onClose: () => void;
}
const CC: React.FC<CCProps> = ({ visible, onClick, onClose, text }) => {
  console.log('-- CC --');
  const [ccc, setCCC] = useState('00000');
  const onClickC = () => {
    console.log('onClickC');
  };
  useEffect(() => {
    setTimeout(() => {
      console.log('-- effect setCCC --');
      setCCC('3333');
    }, 2000);
    return () => {
      console.log('-- delete CC --');
    };
  }, []);
  return (
    <div>
      {visible ? 'show' : null}
      <p onClick={onClick}>323 - {ccc}</p>
      <p>
        <span onClick={onClickC}>ccc -- ddddddd</span>
      </p>
      <Modal visible={visible} onCancel={onClose} footer={null}>
        Modal
      </Modal>
    </div>
  );
};
export default memo(CC);

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React useMemo和useCallback的使用场景

    useMemo 我们知道当父组件发生重新渲染时,其所有(状态.局部变量等)都是新的.一旦子组件依赖于父组件的某一个对象变量,那么无论对象是否发生变化,子组件拿到的都是新的对象,从而使子组件对应的 diff 失效,依旧会重新执行该部分逻辑.在下面的例子中,我们的副作用依赖项中包含了父组件传入的对象参数,每次父组件发生更新时,都会触发数据请求. function Info({ style, }) { console.log('Info 发生渲染'); useEffect(() => { consol

  • react组件memo useMemo useCallback使用区别示例

    目录 正文 memo使用 useMemo使用 useCallback使用 正文 memo用来优化函数组件的重复渲染行为,针对的是一个组件 useMemo返回一个memoized的值 本质都是用同样的算法来判定依赖是否发生改变,继而决定是否触发memo或者useMemo中的逻辑,利用memo就可以避免不必要的重复计算,减少资源浪费 useCallback返回一个memoized的函数 useMemo和useCallback都接收两个参数,第一个参数为fn,第二个参数为[],数组中是变化依赖的参数

  • 解析react 函数组件输入卡顿问题 usecallback react.memo

    解析react 函数组件输入卡顿问题 usecallback react.memo

    目录 现象 分析 解决 方案一: 方案二: 弊端 现象 在输入问题时,输入框响应巨慢. 效果图 分析 右侧控制台显示,子组件不停在mount unmount,子组件中使用了CKEditor组件,每次mount开支较大,导致输入卡顿 代码如下: const qdata = (q.qdata || [ { id: getQuestionId('OPTION') }, { id: getQuestionId('OPTION') }, ]) as SelectOption[]; const render

  • 关于react中useCallback的用法

    目录 基础用法 父组件 子组件 useCallback是react中比较重要的一个hook useCallback 用来返回一个函数,在父子组件传参或者通用函数封装中,起到举足轻重的作用. 基础用法 useCallback的用法与useState的用法基本一致,但最后会返回一个函数,用一个变量保存起来. 返回的函数a会根据b的变化而变化,如果b始终未发生变化,a也不会重新生成,避免函数在不必要的情况下更新. 记得子组件导出时使用memo包裹一下,其作用是对组件前后两次进行浅对比,阻止不必要的更新

  • 详解Ref在React中的交叉用法

    目录 一.首先说明下什么是Ref 二.ref在hooks中的用法 1.ref在hooks中HTMLDom的用法 2.ref在hooks中与函数式组件的用法 3.ref在hooks中与类组件一同使用 4.ref在hooks中与class.react-redux一同使用 一.首先说明下什么是Ref Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧.对于大多数应用中的组件来说,这通常不是必需的.但其对某些组件,尤其是可重用的组件库是很有用的 Ref官网说明:点击这里 二.ref在ho

  • 一文搞懂redux在react中的初步用法

    Redux是一个数据状态管理插件,当使用React或是vue开发组件化的SPA程序时,组件之间共享信息是一个非常大的问题.例如,用户登陆之后客户端会存储用户信息(ID,头像等),而系统的很多组件都会用到这些信息,当使用这些信息的时候,每次都重新获取一遍,这样会非常的麻烦,因此每个系统都需要一个管理多组件使用的公共信息的功能,这就是redux的作用. 如果你是从来没有接触过redux的开发者,希望您能够有耐心的看一看,我也是看好很多博客慢慢自己总结的!!!!比大佬们一个一个分布找要强一点. imp

  • 示例详解react中useState的用法

    useState useState 通过在函数组件里调用它来给组件添加一些内部 state.React 会在重复渲染时保留这个 state.useState 会返回一对值:当前状态和一个让你更新它的函数,你可以在事件处理函数中或其他一些地方调用这个函数.它类似 class 组件的 this.setState,但是它不会把新的 state 和旧的 state 进行合并. 接下来通过一个示例来看看怎么使用 useState. 有这么一个需求:需要在 iframe 中加载外部网页. 初始的代码我们通过

  • React中refs的一些常见用法汇总

    目录 什么是Refs 一.String 类型的 Refs 二.回调 Refs 三.React.createRef() 四.useRef 五.Refs 与函数组件 总结 什么是Refs Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素. Ref转发是一项将ref自动通过组件传递到子组件的技巧. 通常用来获取DOM节点或者React元素实例的工具.在React中Refs提供了一种方式,允许用户访问dom节点或者在render方法中创建的React

  • 解析React中useMemo与useCallback的区别

    useMemo 把“创建”函数和依赖项数组作为参数传⼊入useMemo,它仅会在某个依赖项改变时才重新计算memoized 值.这种优化有助于避免在每次渲染时都进⾏行行⾼高开销的计算. importReact, { useState, useMemo } from"react"; export default functionUseMemoPage(props) { const [count, setCount] =useState(0); constexpensive=useMemo

  • React 中使用 react-i18next 国际化的过程(react-i18next 的基本用法)

    目录 简介 安装与使用 安装 准备新建一个 React 项目,安装依赖包: 使用 检测当前浏览器语言国际化组件 手动切换国际化语言 总结 本文使用 React-i18next 库结合 React, 介绍如何在 React 中配置使用国际化.官方地址:i18next | react-i18next 简介 react-i18next 是基于 i18next 的一款强大的国际化框架,可以用于 react 和 react-native 应用:react-i18next 特点: 提供多种组件可以在hoc,

  • React中关于render()的用法及说明

    目录 React中的render() 1.render() 2.当 render 被调用时 3.render() 函数应该为纯函数 4.如需与浏览器进行交互 5.在React.Component类 6.在react中触发render的有4条路径 7.生命周期流程图(来源于官网) React render在什么时候会被触发? 总结 React中的render() 1.render() 是 class 组件中唯一必须实现的方法 2.当 render 被调用时 它会检查 this.props 和 th

  • react中hook介绍以及使用教程

    前言 最近由于公司的项目开发,就学习了在react关于hook的使用,对其有个基本的认识以及如何在项目中去应用hook.在这篇博客中主要从以下的几个点进行介绍: hook简介 hook中常用api的使用 hook在使用过程中需要去注意的地方 hook中怎样去实现class组件中的声明周期函数 hook 首先介绍关于hook的含义,以及其所要去面对的一些场景 含义:Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性

  • react中常见hook的使用方式

    react中常见hook的使用方式

    1.什么是hook? react hook是react 16.8推出的方法,能够让函数式组件像类式组件一样拥有state.ref.生命周期等属性. 2.为什么要出现hook? 函数式组件是全局当中一个普通函数,在非严格模式下this指向window,但是react内部开启了严格模式,此时this指向undefined,无法像类式组件一样使用state.ref,函数式组件定义的变量都是局部的,当组件进行更新时会重新定义,也无法存储,所以在hook出现之前,函数式组件有很大的局限性,通常情况下都会使

随机推荐