React hooks之useCallback的使用与性能分析

最新推荐文章于 2024-06-12 00:46:28 发布
最新推荐文章于 2024-06-12 00:46:28 发布
阅读量7k 收藏 10
点赞数 4
分类专栏： 前端 react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44742090/article/details/131525420
版权

使用useCallback优化代码

useCallback是对传过来的回调函数优化，返回的是一个函数；useMemo返回值可以是任何，函数，对象等都可以。
简单来说就是返回一个函数，只有在依赖项发生变化的时候才会更新（返回一个新的函数）。

1.原理分析

useCallback是React Hooks中的一个函数，用于优化函数组件的性能。它的作用是返回一个memoized（记忆化的）函数，这个函数只有在依赖项发生变化时才会重新计算，否则会直接返回上一次计算的结果。
useCallback是对传过来的回调函数优化，返回的是一个函数；useMemo返回值可以是任何，函数，对象等都可以。
简单来说就是返回一个函数，只有在依赖项发生变化的时候才会更新（返回一个新的函数）。

2.案例分析：

父组件定义一个请求函数fetchData，和一个状态query,将query当作fetchData的参数，将该函数传递进子组件，当父组件query发生变化时，让子组件调用该函数发起请求。

class Parent extends Component {
  state = {
    query: 'react'
  };
  fetchData = () => {    
    const url = 'https://hn.algolia.com/api/v1/search?query=' + this.state.query;    // ... Fetch data and do something ...  };  render() {
    return <Child fetchData={this.fetchData} />;
  }
}

class Child extends Component {
  state = {
    data: null
  };
  componentDidMount() {
    this.props.fetchData();
  }
  componentDidUpdate(prevProps) {
    // 🔴 This condition will never be true
    if (this.props.fetchData !== prevProps.fetchData) {
      this.props.fetchData();
    }
  }
  render() {
    // ...
  }
}

在本代码中，fetchData是一个class方法！（或者你也可以说是class属性）它不会因为状态的改变而不同，所以this.props.fetchData和 prevProps.fetchData始终相等，因此不会重新请求。

2.1旧思维–优化该案例：

子组件使用：

componentDidUpdate(prevProps) {
    this.props.fetchData();
}

这样可以发起请求，但是会在每次渲染后都去请求。
或者改变父组件：

render() {
    return <Child fetchData={this.fetchData.bind(this, this.state.query)} />;
}

但这样一来，this.props.fetchData !== prevProps.fetchData 表达式永远是true，即使query并未改变。这会导致我们总是去请求。(bind() 方法会创建一个新的函数对象)
唯一现实可行的办法是把query本身传入 Child 组件。 Child 虽然实际并没有直接使用这个query的值，但能在它改变的时候触发一次重新请求：

class Parent extends Component {
  state = {
    query: 'react'
  };
  fetchData = () => {
    const url = 'https://hn.algolia.com/api/v1/search?query=' + this.state.query;
    // ... Fetch data and do something ...
  };
  render() {
    return <Child fetchData={this.fetchData} query={this.state.query} />;  }
}

class Child extends Component {
  state = {
    data: null
  };
  componentDidMount() {
    this.props.fetchData();
  }
  componentDidUpdate(prevProps) {
    if (this.props.query !== prevProps.query) {      this.props.fetchData();    }  }
  render() {
    // ...
  }
}

在class组件中，函数属性本身并不是数据流的一部分。使用useCallback，函数完全可以参与到数据流中。我们可以说如果一个函数的输入改变了，这个函数就改变了。如果没有，函数也不会改变。

2.2开始使用hooks：

场景一： 使用函数组件
但父组件不使用useCallback处理函数

import React, { useCallback, useState, useEffect } from 'react';
import './App.css';

function App() {
  const [query, setQuery] = useState(1);
  const [queryOther, setQueryOther] = useState(1);
  const fecthData = () => {
    console.log('新的fetch');
    return query;
  }
  const add = () => {
    console.log('点击add');
    setQuery(query + 1);
  }
  const addOther = () => {
    console.log('点击addOther');
    setQueryOther(queryOther + 1);
  }
  return (
    <>
      <Child fecthData={fecthData} />
      <button onClick={add}>+1</button>
      <button onClick={addOther}>other+1</button>
      <div>{ query }</div>
    </>
  );
}

function Child({ fecthData }: { fecthData: any }) {
  console.log('子组件相关内容');
  useEffect(() => {
    const querN = fecthData();
    console.log('子组件调用该函数获取到相关内容', querN);
  }, [fecthData])
  return <div>
    123
  </div>
}

export default App;

初始化的时候:
在这里插入图片描述
点击按钮：

在这里插入图片描述
但是从图里面可以看到，点击addOther时，并没有使得query发生变化，但是子组件仍然调用了该函数发起请求。可以看到这种方法需求可以使得子组件在父组件的状态query发生变化时，成功发起了请求，但是还是存在副作用。
问题的原因在于状态queryOther的改变，使得父组件重新渲染，重新生成了fecthData函数，并返回了该函数新的地址，导致子组件刷新。

场景二：父组件使用useCallback处理函数

import React, { useCallback, useState, useEffect } from 'react';
import './App.css';

function App() {
  const [query, setQuery] = useState(1);
  const [queryOther, setQueryOther] = useState(1);
  const fecthData = useCallback(() => {
    console.log('新的fetch');
    return query;
  }, [query])
  const add = () => {
    console.log('点击add');
    setQuery(query + 1);
  }
  const addOther = () => {
    console.log('点击addOther');
    setQueryOther(queryOther + 1);
  }
  return (
    <>
      <Child fecthData={fecthData} />
      <button onClick={add}>+1</button>
      <button onClick={addOther}>other+1</button>
      <div>{ query }</div>
    </>
  );
}

function Child({ fecthData }: { fecthData: any }) {
  console.log('子组件相关内容');
  useEffect(() => {
    const querN = fecthData();
    console.log('子组件调用该函数获取到相关内容', querN);
  }, [fecthData])
  return <div>
    123
  </div>
}

export default App;

初始状态
在这里插入图片描述
点击按钮：
在这里插入图片描述

可以看到只有点击+1按钮改变query才会使得子组件发起请求，点击other+1已经没有处罚上文副作用。

原因分析：
使用了useCallback，useCallback的工作原理是什么？useCallBack的本质工作不是在依赖不变的情况下阻止函数创建，而是在依赖不变的情况下不返回新的函数地址而返回旧的函数地址。不论是否使用useCallBack都无法阻止组件render时函数的重新创建。在本例子中点击按钮other+1并没有使得query发生变化，所以并没有返回新的fetchData函数地址，又因为在子组件中使用useEffect对fetchData监听时，所以子组件不会发起请求。但是，点击按钮other+1时，子组件虽然没发起请求，但是还是刷新了，这是什么原因呢？这是因为子组件直接在父组件中挂载，没有做过任何优化，当父组件重新渲染时，会导致子组件也跟着渲染。所以单纯的使用useCallback可以监听到相应变化，使得子组件做出变化，但是并不能优化性能。所以当我们不用监听某个状态使得函数发生改变时，不要轻易使用useCallback，因为使用 useCallBack后每次执行到这里内部比对是否变化，还有存一下之前的函数，消耗更大了。

场景三：优化上述问题，搭配React.memo使用

import React, { useCallback, useState, useEffect } from 'react';
import './App.css';

function App() {
  const [query, setQuery] = useState(1);
  const [queryOther, setQueryOther] = useState(1);
  const fecthData = useCallback(() => {
    console.log('新的fetch');
    return query;
  }, [query])
  const add = () => {
    console.log('点击add');
    setQuery(query + 1);
  }
  const addOther = () => {
    console.log('点击addOther');
    setQueryOther(queryOther + 1);
  }
  return (
    <>
      <Child fecthData={fecthData} />
      <button onClick={add}>+1</button>
      <button onClick={addOther}>other+1</button>
      <div>{ query }</div>  ，，m

const Child = React.memo(({ fecthData }: { fecthData: any }) => {
  console.log('子组件相关内容');
  useEffect(() => {
    const querN = fecthData();
    console.log('子组件调用该函数获取到相关内容', querN);
  }, [fecthData])
  return <div>
    123
  </div>
})


export default App;

初始状态：
在这里插入图片描述
点击按钮:
在这里插入图片描述
一切问题都解决了。点击other+1按钮，没有使得子组件发起请求，也没有使得子组件因为这个无关变量的变化，导致重新渲染。

原因分析：

  • 使用useCallback使得无关变量变化时，阻止了新创建的fetchData的新地址返回，传给子组件的还是原本的函数地址（useCallBack的本质工作不是在依赖不变的情况下阻止函数创建，而是在依赖不变的情况下不返回新的函数地址而返回旧的函数地址）
  • React.memo 这个方法，此方法内会对 props 做一个浅层比较，如果如果 props 没有发生改变（useCallback的存在使得props没变化），则不会重新渲染此组件。

场景四：单纯使用React.memo会发生什么

import React, { useCallback, useState, useEffect } from 'react';
import './App.css';

function App() {
  const [query, setQuery] = useState(1);
  const [queryOther, setQueryOther] = useState(1);
  const fecthData = () => {
    console.log('新的fetch');
    return query;
  }
  const add = () => {
    console.log('点击add');
    setQuery(query + 1);
  }
  const addOther = () => {
    console.log('点击addOther');
    setQueryOther(queryOther + 1);
  }
  return (
    <>
      <Child fecthData={fecthData} />
      <button onClick={add}>+1</button>
      <button onClick={addOther}>other+1</button>
      <div>{ query }</div>
    </>
  );
}

const Child = React.memo(({ fecthData }: { fecthData: any }) => {
  console.log('子组件相关内容');
  useEffect(() => {
    const querN = fecthData();
    console.log('子组件调用该函数获取到相关内容', querN);
  }, [fecthData])
  return <div>
    123
  </div>
})


export default App;

初始状态：
在这里插入图片描述
点击按钮
在这里插入图片描述
React.memo检测的是props中数据的栈地址是否改变。而父组件重新构建的时候，会重新构建父组件中的所有函数（旧函数销毁，新函数创建，等于更新了函数地址）,新的函数地址传入到子组件中被props检测到栈地址更新。也就引发了子组件的重新渲染。所以，在上面的代码示例里面，子组件是要被重新渲染的。上文中的fetchData因为失去了useCallback的保护使得子组件的props发生了变化，从而React.memo也失去了作用，而且因为fetchData因为失去了useCallback的保护，使得点击other+1按钮改变无关的变量时，子组件也调用了请求函数。

3.useCallback使用总结：

  • 可以使用useCallback可以监听到相应状态变化，使得父/子组件做出响应。
  • 但是滥用useCallback会影响性能，需搭配React.memo进行使用，否则适得其反。
贱贱Chan
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-memoization-hooks-2021-02-16:使用React Memo类，useCallback和useMemo控制性能的基本代码存储库
05-09
使用React Memo，useCallback和useMemo控制性能在本课程中，我们将创建一个使用GitHub API数据的应用程序，并通过它可以浏览各种改进和性能分析的概念，我们将学习如何在我们的应用程序中使用诸如useMemo和...
react-hooks:练习 react hooks 使用 Hacker News API 搜索新闻
05-29
本项目"react-hooks:练习 react hooks 使用 Hacker News API 搜索新闻"正是一个实践React Hooks的实例，通过结合Hacker News开放API，实现了新闻搜索功能，为学习和理解React Hooks提供了很好的实践平台。...
浅谈useCallback函数
庸人方自扰，自在就好
06-07 6064
useCallback 是 React 提供的一个 Hook 函数，用于缓存需要在组件中多次调用的回调函数。它接受两个参数：回调函数和依赖数组。当依赖数组中的任何一个值发生变化时，useCallback 将会返回一个新的回调函数，否则将会返回之前缓存的回调函数。这样可以避免在每次渲染时都重新生成回调函数，从而提高组件的性能。useCallback 是 React 中一个非常有用的 Hook 函数，可以帮助我们缓存需要在组件中多次调用的回调函数。
React-useCallback
最新发布
qq_35260673的博客
06-12 645
总结了useCallback这个Hook的用法
React hooks之 useCallback的使用
localhost
09-30 528
钩子避免了类所需的大量开销，例如在构造函数中创建类实例和绑定事件处理程序的成本。 使用 Hooks 的惯用代码不需要在使用高阶组件、渲染道具和上下文的代码库中普遍存在的深层组件树嵌套。使用更小的组件树，React 要做的工作更少。
React hooks之useCallback的使用场景及其深度解读
hyupeng1006的博客
11-08 1591
1、useCallBack不是每个函数都需要使用！ 2、useCallBack在什么情况下使用？
React Hooks大全—useCallback
CreatorRay的博客
01-07 1251
在本文中，我们将重点介绍一个React常用的内置Hook，即useCallback。useCallback可以让我们缓存函数，避免因为函数引用的变化而导致不必要的子组件重渲染。我们讲解它的基本使用、实现原理、与useMemo的区别、最佳实践等。
React,Hooks中UseCallback的使用
weixin_45389051的博客
07-29 7604
useCallback:是为了性能的优化 1.useCallback会返回一个函数的memoized(记忆的)值 2.在依赖不变的情况下,多次定义的时候,返回的值是相同的 先说一下useCallback不能做的性能优化 import React, { useState, useCallback } from 'react' export default function UseCallbackDemoOne() { const [count,setCount] = useState(0) c
React Hooks - 使用useCallback和useMemo进行性能优化
m0_71485750的博客
10-26 9095
这是因为message发生改变, App组件会重新渲染, 那么就会重新定义一个新的increment函数, 将新的increment函数传递到Test组件, Test组件的props发生改变就会重新渲染。当向Test组件传递新的increment时, Test组件的props就会改变, Test依然会重新渲染, 这也是我们想要实现的效果。由于counter发生改变, 就会重新定义一个新的increment函数, 因此我们只要修改了counter, 就会传递一个新的increment函数到Test组件中;
React Hooks之useCallback&useMemo
linfeng_meng的博客
09-23 371
`useCallback`防止因为组件重新渲染，导致方法重新创建，起到缓存作用。只有某个依赖项变化了，才重新声明一次。
react hooks之useCallback
m0_58001779的博客
07-15 509
一、概述 在hooks中，useCallback函数是一个记忆函数，主要作用就是提高系统性能，在之前，每当状态改变的时候，整个函数组件比如里面的函数，变量都会重新执行，使用这个函数之后，只有当依赖项发生变化，才会重新声明相关函数。 二、参数信息 这个函数的第一个参数是一个回调函数，第二个参数是一个依赖项数组，只有当依赖项数组发生变化时，回调函数才会重新声明，当无关依赖项发生变化，回调函数不会重新声明。 三、返回值 这个函数的返回值就是第一个参数 ...
ReactHooks：useCallback与useMemo
weixin_43297321的博客
11-12 374
useMemo与useCallback使用指南 转载自：https://blog.csdn.net/sinat_17775997/article/details/94453167 回顾 在介绍一下这两个hooks的作用之前，我们先来回顾一下react中的性能优化。在hooks诞生之前，如果组件包含内部state，我们都是基于class的形式来创建组件。当时我们也知道，react中，性能的优化点在于： 调用setState，就会触发组件的重新渲染，无论前后的state是否不同 父组件更新，子组件也会自动的更
awesome-react-hooks：关于React Hooks的精选列表
01-31
React Hooks 是React 16.8版本引入的一个重大特性，它彻底改变了React组件的编写方式，使得在函数组件中也能使用状态和其他React生命周期方法。"awesome-react-hooks" 是一个精心整理的React Hooks资源列表，旨在为...
react-TSLint规则用于检测ReactHooks的无效使用
08-14
在使用这些TSLint规则时，可以配置`.tslint.json`文件或使用ESLint与`@typescript-eslint/parser`和`@typescript-eslint/eslint-plugin`来实现对React Hooks的检查。Gelio-tslint-react-hooks-6e3dfe0这个库可能提供...
react-hooks如何使用？
01-08
react-hooks使用 1. 什么是react-hooks? ** react-hooks是react16.8以后，react新增的钩子API，目的是增加代码的可复用性，逻辑性，弥补无状态组件没有生命周期，没有数据管理状态state的缺陷。笔者认为，react-...
JS中Map的遍历
热门推荐
qq_44742090的博客
03-28 1万+
1.forEach遍历 const map = new Map([['key1','v1'],['key2','v2'],['key3','v3']]); console.log(map); map.forEach((val,key) => { console.log(val,key); }) /** v1 key1 v2 key2 v3 key3 */ 先输出value，再输出key for…of… for(let i of map) { console.log(i); } /** [
细谈text-align: center
qq_44742090的博客
11-26 1万+
text-align: center的几个用处 1.概括 CSS参考手册上关于text-align:center的说明是text-align 属性规定元素中的文本的水平对齐方式。 该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。 ...
JS数组常用的方法shift,unshift,splice,split,slice
qq_44742090的博客
08-11 8286
JS数组常用的方法 1.push push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 2.pop pop() 方法用于删除并返回数组的最后一个元素。 3.shift shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。 4.unshift unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 5.sort sort() 方法用于对数组的元素进行排序。 6.revere reverse() 方法用于颠倒数组中元素的顺序。 1到6代码演示
react hooks usecallback
08-19
使用useCallback可以避免在每次渲染时创建新的回调函数，从而提高性能。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* *2* *3* [React hook之...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值