React Performance Hooks之useCallb

优化重新渲染性能的常见方法是跳过不必要的工作。 例如，可以告诉 React 重用缓存的计算，或者如果数据自上次渲染以来没有更改，则跳过重新渲染。

要跳过计算和不必要的重新渲染，请使用以下 Hooks 之一：

• useMemo 缓存计算结果。
• useCallback缓存函数定义，再传递给优化组件。
  要优先考虑渲染，请使用以下 Hooks 之一：
• useTransition 将状态转换标记为非阻塞并允许其他更新中断它。
• useDeferredValue 可以推迟更新 UI 的非关键部分，并让其他部分先更新。

const cachedFn = useCallback(fn, dependencies)

定义

useCallback(fn, dependencies)

在组件中引用useCallback

import { useCallback } from 'react';

参数

• fn: 想缓存的函数。该函数可以带参数并返回任意类型的值。返回一个函数定义，并不调用函数。

• dependencies: 监听的变量值的列表。变量值来控制第一个参数fn是否改变。

返回值

在初次渲染，usecallback返回fn，即第一个参数传递的函数。
再次渲染，react会通过Object.js比较两次dependiencies是否不同， 相同则返回上一次的函数，不同则更新函数。

用法

跳过组件重新渲染

import { useCallback, useState } from "react";

export function CallbackDemo({theme}: any) {
  console.log("###callback");
  const [name, setName] = useState("Layor");
  function handleSubmit() {
    console.log("###submit");
  }

  return (
    <div>
      <div onClick={() => setName("Tom")}>callback {name}</div>
      <Form onSubmit={handleSubmit}></Form>
    </div>
  );
}

function Form({ onSubmit }: any) {
  console.log("###form");
  return <div onClick={onSubmit}>input form</div>;
}

控制台输出：

###callback
###callback
###form
###form

接下来，我们开始优化了。
首先使用memo将form组件包裹起来， 再callBackDemo中定义handleSubmit函数时使用useCallback

import { useCallback, useState, memo } from "react";

export function CallbackDemo({theme}: any) {
  console.log("###callback");
  const [name, setName] = useState("Layor");
  const handleSubmit = useCallback(function handleSubmit() {
    console.log("###submit");
  },[theme])

  return (
    <div>
      <div onClick={() => setName("Tom")}>callback {name}</div>
      <Form onSubmit={handleSubmit}></Form>
    </div>
  );
}

const Form = memo(function Form({ onSubmit }: any) {
  console.log("###form");  //在click的时候不会打印
  return <div onClick={onSubmit}>input form</div>;
})

useCallback我们就介绍到这里了。