useCallback 接受一个函数和一个依赖项二维数组做为

useCallback 接受一个函数和一个依赖项二维数组做为

useCallback 接受一个函数和一个依赖项二维数组做为主要参数，随后回到一个 memoized 版本函数公式。假如依赖项二维数组中的任何一个依赖项产生变更，则 useCallback 会回到一个新的函数公式。假如依赖项二维数组不会改变，则 useCallback 将回到之前 memoized 的函数公式。

应用 useCallback 的好处在于能够避免在每一次再次3D渲染的时候都建立一个新的调用函数，进而减少不必要的部件再次3D渲染。特别是当传达给子组件的调用函数产生变更时，这类提升能够显著提升特性。

序言

useCallback 了解必须牵涉到函数公式部件每一次升级就会形成一个新的闭包的重启动与浅较为重点知识，假如不是很了解提议看一下之前的帖子

一个东西出去毫无疑问是为了解决某一难题，先来看看难题。

父部件

import { useState } from "react";
import Children from "./children";

export default function App() {
   const [count, setCount] = useState(0);
   const [chartData, setChartData] = useState([
      { year: "1991", value: 3 },
      { year: "1992", value: 4 },
      { year: "1993", value: 3.5 },
      { year: "1994", value: 5 },
      { year: "1995", value: 4.9 },
      { year: "1996", value: 6 },
      { year: "1997", value: 7 },
      { year: "1998", value: 9 },
      { year: "1999", value: 13 },
   ]);

   const chartClick = (plot: any) => {
      plot.on("legend-item:click", (...args: any) => {
         console.log("数据图表的点一下事儿，可参照文本文档加上其他事情", args);
      });
   };

   // 提升 看了下边的存在的问题解决方案正在看
   //    const chartClick = useCallBack((plot: any) => {
   //       plot.on("legend-item:click", (...args: any) => {
   //          console.log("数据图表的点一下事儿，可参照文本文档加上其他事情", args);
   //       });
   // }, [chartData])

   function handleClick() {
      setCount(count   1);
   }

   return (
      <div style={{ position: "fixed", top: 100, right: 100 }}>
         Count: {count}
         <br />
         <button onClick={handleClick}>count    </button>
         <Children chartData={chartData} bindReady={chartClick} />
      </div>
   );
}

子组件

import { Line } from "@ant-design/charts";

export default function Children(props: any) {
   const { chartData, bindReady } = props;
   const config = {
      data: chartData,
      height: 400,
      xField: "year",
      yField: "value",
      point: {
         size: 5,
         shape: "diamond",
      },
   };

   return (
      <div style={{ width: 200, height: 200 }}>
         <Line onReady={bindReady} {...config} />
      </div>
   );
}

• 执行命令实际效果：

难题

我还在一般使用数据图表时都会将他封装形式成一个部件传送相对应的主要参数使它表明相对应的数据图表就可以了。这里我们把父部件里的 count 和 数据图表 当做2个总体 互不联系。

但图上大家可以看到 当 count 升级更新的情况下，本来数据图表的信息并没有变化但是它再次营造了一下（图片中的数据图表闪烁）。这性能视觉效果都不太好。

理想化下：大家只有升级了 count 就只帮我升级 count 就行了 Children 部件不用帮我再次3D渲染

处理

克服的其实很简单，大家把 chartClick 方式用 useCallback 包一下添加一个依靠就行了。

缘故

主要是因为 React 每一次升级都会成为一个新的闭包 ，因为里面的自变量啊函数公式啊都会再次建立。你虽然看上去值没有改变，可是详细地址都影响了。props 和 state 变化时 React 都要进行浅较为。

在编码中 尽管你没有变化 Children 部件接收到的 bindReady 和 chartData 特性，但是你 setCount 更改值后，造成 App 部件再次3D渲染构成了一个新的闭包。 chartClick 方式跟随便会再次建立，那样详细地址可能就影响了。 React 浅较为的时候发现2次详细地址不一样都会去升级。

最终

有些爱情动脑筋经的小伙伴们就发现了。即然每一次升级函数公式都是会再次建立，那么我为每个函数声明都包一层 useCallBack 不就行了。

其实不然只能得不偿失。并不是每个函数公式都很适合，所有添加了话有的时候会造成一些奇怪问题，针对性能增加而言也没有太大的协助。

什么时候加呢？ 假如你这一函数公式里边的情况许多，启用十分经常，或是原文中这一函数公式必须传达给子组件时 就可以使用。

useCallback 第二个主要参数

仅有监测到第二个主要参数更改时她才会升级函数公式。很多小伙伴不知道他们依靠改变啥。我觉得这个依靠主要看你这一函数中采用了这些情况，这些都是 useCallback 的依赖性。其实有一些并不是，如同文中的依靠是 chartData 。

本站是一个以CSS、JavaScript、Vue、HTML为中心的前端开发技术网址。我们的使命是为众多前端工程师者提供全方位、全方位、好用的前端工程师专业知识和技术服务。 在网站上，大家可以学到最新前端开发技术，掌握前端工程师最新发布的趋势和良好实践。大家提供大量实例教程和实例，让大家可以快速上手前端工程师的关键技术和程序。 本站还提供了一系列好用的工具软件，帮助你更高效地开展前端工程师工作中。公司提供的一种手段和软件都要经过精心策划和改进，能够帮助你节约时间精力，提高研发效率。 此外，本站还拥有一个有活力的小区，你可以在社区里与其它前端工程师者沟通交流技术性、交流经验、处理问题。我们坚信，街道的能量能够帮助你能够更好地进步与成长。 在网站上，大家可以寻找你需要的一切前端工程师网络资源，使您成为一名更加出色的网页开发者。欢迎你添加我们的大家庭，一起探索前端工程师的无限潜能!