不要过度使用React.useCallback()

更新日期: 2020-05-15阅读: 2.2k标签: react

我博客的一位读者在Facebook上联系到我,提出了一个有趣的问题。他说,他的队友不管在什么情况下,都会把每一个回调函数封装在 useCallback() 里面。

import react, { useCallback } from 'react';

function MyComponent() {
  const handleClick = useCallback(() => {
    // handle the click event
  }, []);

  return <MyChild onClick={handleClick} />;
}

“每个回调函数都应该被记住,以防止使用回调函数的子组件被无用地重新渲染”,这是他的队友的理由。

这句话与事实相去甚远。此外,useCallback() 的这种用法会使组件变慢,从而损害性能。

在本文中,我将解释如何正确使用 useCallback()。


1.了解函数相等性检查

在深入研究 useCallback() 用法之前,让我们区分一下钩子要解决的问题:函数相等性检查。

让我们定义一个名为 factory() 的函数,该函数返回函数:

function factory() {
  return (a, b) => a + b;
}

const sum1 = factory();
const sum2 = factory();

sum1(1, 2); // => 3
sum2(1, 2); // => 3

sum1 === sum2; // => false
sum1 === sum1; // => true

sum1 和 sum2 是将两个数字相加的函数,它们是由 factory() 函数创建的。

函数 sum1 和 sum2 共享相同的代码源,但是它们是不同的对象,比较它们 sum1 === sum2 结果为 false。

这就是JavaScript的工作方式,对象(包括函数对象)仅等于其自身。


2.useCallback() 的目的

共享相同代码的不同函数实例往往在React组件内部创建。

当 React 组件主体创建一个函数(例如回调或事件处理程序)时,这个函数会在每次渲染时重新创建。

import React from 'react';

function MyComponent() {
  // handleClick在每次渲染时重新创建
  const handleClick = () => {
    console.log('Clicked!');
  };

  // ...
}

handleClick 在 MyComponent 的每次渲染中都是一个不同的函数对象。

因为内联函数很“便宜”,所以在每次渲染时重新创建函数不是问题,每个组件有几个内联函数是可以接受的。

然而,在某些情况下,你需要保留一个函数的一个实例:

  • 包装在 React.memo()(或 shouldComponentUpdate )中的组件接受回调prop。
  • 当函数用作其他hooks的依赖项时 useEffect(...,[callback])

这就是当 useCallback(callbackFun, deps) 帮助你的情况:给出相同的依赖值 deps,hook在两次渲染之间返回相同的函数实例。

import React, { useCallback } from 'react';

function MyComponent() {
  // handleClick是同一个函数对象
  const handleClick = useCallback(() => {
    console.log('Clicked!');
  }, []);

  // ...
}

handleClick 变量将在不同的 MyComponent 的渲染之间始终拥有相同的回调函数对象。


3.一个好用例

想象一下,你有一个呈现大的项目列表组件:

import React from 'react';

function MyBigList({ items, handleClick }) {
  const map = (item, index) => (
    <div onClick={() => handleClick(index)}>{item}</div>;
  );
  return <div>{items.map(map)}</div>;
}

export const MyBigList = React.memo(MyBigList);

MyBigList 渲染了一个项目列表,要知道这个列表可能很大,可能有几百个项目。要保留重新渲染的列表,可以将其封装到 React.memo 中。

单击一个项目时,MyBigList 的父组件需要提供项目列表和处理程序功能。

import React from 'react';

import useSearch from './fetch-items';

function MyParent({ term }) {
  const handleClick = useCallback((item) => {
    console.log('You clicked ', item);
  }, [term]);

  const items = useSearch(term);

  return (
    <MyBigList
      items={items}
      handleClick={handleClick}
    />
  );
}

handleClick 回调由 useCallback() 记忆。只要 term 变量保持不变,useCallback() 就会返回相同的函数对象。

即使由于某些原因重新启用了 MyParent 组件,handleClick 仍保持不变,并且不会破坏 MyBigList的记忆。


4.一个“坏”的用例

让我们回顾一下本文简介中的示例:

import React, { useCallback } from 'react';

function MyComponent() {
  const handleClick = useCallback(() => {
    // handle the click event
  }, []);

  return <MyChild onClick={handleClick} />;
}

function MyChild ({ onClick }) {
  return <button onClick={onClick}>I am a child</button>;
}

记住 handleClick 是否有意义?

没有,因为调用 useCallback() 需要很多工作,每次渲染 MyComponent 时,都会调用 useCallback() Hook。

从内部来讲,React确保返回相同的对象函数。即便如此,内联函数仍然在每次渲染时创建,useCallback() 只是跳过了它。

即使用 useCallback() 返回相同的函数实例,也不会带来任何好处,因为优化要比没有优化花费更多。

不要忘记增加的代码复杂性,你必须确保 useCallback() 的 deps 与您在 memoized 回调中使用的 deps 保持同步。

只需接受每次重新渲染时创建新的函数:

import React, { useCallback } from 'react';

function MyComponent() {
  const handleClick = () => {
    // handle the click event
  };

  return <MyChild onClick={handleClick} />;
}

function MyChild ({ onClick }) {
  return <button onClick={onClick}>I am a child</button>;
}


5.总结

任何优化都会增加复杂性,任何过早添加的优化都会带来风险,因为优化后的代码可能会多次更改。

原文:https://dmitripavlutin.com/dont-overuse-react-usecallback/
作者:Dmitri Pavlutin
翻译:微信公众号《前端外文精选》


链接: https://www.fly63.com/article/detial/8995

如何优雅的设计 React 组件

如今的 Web 前端已被 React、Vue 和 Angular 三分天下,尽管现在的 jQuery 已不再那么流行,但 jQuery 的设计思想还是非常值得致敬和学习的,特别是 jQuery 的插件化。

React深度编程:受控组件与非受控组件

受控组件与非受控组件在官网与国内网上的资料都不多,有些人觉得它可有可不有,也不在意。这恰恰显示React的威力,满足不同规模大小的工程需求。

React框架学习_关于React两种构建应用方式选择

一般在传统模式下,我们构建前端项目很简单。就是下载各种js文件,如JQuery、Echart等,直接放置在html静态文件。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。

Gatsby.js_一款基于React.js静态站点生成工具

Gatsby能快速的使用 React 生态系统来生成静态网站,可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。

React创建组件的三种方式及其区别

React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:函数式定义的无状态组件、es5原生方式React.createClass定义的组件、es6形式的extends React.Component定义的组件

react生命周期详解_深入理解React生命周期

React主要思想是通过构建可复用组件来构建用户界面,每个组件都有自己的生命周期,它规定了组件的状态和方法需要在哪个阶段改变和执行。所谓组件就是有限状态机,,表示有限个状态以及在这些状态之间的转移和动作行为的模型。

React + Webpack 构建打包优化

React 相关的优化:使用 babel-react-optimize 对 React 代码进行优化,检查没有使用的库,去除 import 引用,按需打包所用的类库,比如 lodash 、echarts 等.Webpack 构建打包存在的问题两个方面:构建速度慢,打包后的文件体积过大

react router中页面传值的三种方法

这篇文章主要介绍React Router定义路由之后如何传值,有关React和React Router 。react router中页面传值的三种方法:props.params、query、state

react 高阶组件的 理解和应用

react 高阶组件简单的理解是:一个包装了另一个基础组件的组件。高阶组件的两种形式:属性代理(Props Proxy)、反向继承 (Inheritance Inversion)

react中的refs属性的使用方法

React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!