理解React hook useCallback作用

最新推荐文章于 2024-07-24 08:04:56 发布

前端分享会

最新推荐文章于 2024-07-24 08:04:56 发布

阅读量5.5k

点赞数 1

分类专栏： react

本文链接：https://blog.csdn.net/weixin_43905830/article/details/109008628

版权

本文探讨了React中的useCallback Hook，旨在减少子组件不必要的渲染。通过场景展示和实例解析，解释了如何使用useCallback优化性能，以及其参数、返回值和正确使用方式。在特定条件下，未正确使用useCallback可能会降低性能。

摘要由CSDN通过智能技术生成

为什么需要使用useCallback呢？？，我们先来看看官网给出的解释

在这里插入图片描述
这里我们看到的作用就是减少子组件没必要的渲染，具体怎么去理解我们等下看例子，我在官网的基础上再加上自己的理解吧，useCallback的目的是在与缓存了每次渲染时inline callback的实例，这样方便配合子组件的shouldComponentUpdate或者React.memo，去减少没必要的渲染，这里要提醒下React.memo和React.callback要配合使用，不然不仅不能提升性能还有可能让性能下降

场景展示

在class中父组件给子组件传递一个方法通常会采用以下的方式。

import React from 'react'
class ParentComponent extends React.Component{
   
    constructor(props)
    {
   
        super(props);
        this.state={
   
            count:0
        }
        this.count=0;
    }
    parentClick(){
   
        console.log("you click parent");
        this.count++;
        this.setState({
   count:this.count});
    }
    childClick(){
   
        console.log("you cvlick child")
    }
    render(){
   
        return(
            <div>
                <div onClick={
   ()=>{
   
                    this.parentClick()
                }}>
                    ParentComponent
                </div>
                <ChildComponent childClick={
   ()=>{
   
                    this.childClick();