防止在使用 useState 的功能组件中将新函数作为道具传递

Question

我知道每次渲染都将新函数作为 prop 传递给 react 组件会影响性能（例如传递箭头函数）。在类组件中，我通常通过传递类的方法来解决这个问题。 但是假设我们有一个使用useState 的功能组件，我想创建一个闭包来调用从useState 返回的函数。该函数将在每次渲染时重新创建，因此它传递给的任何组件都将被重新渲染。有没有办法避免在函数组件内部传递一个引用某个变量、函数的新函数？

import React from 'react'
import IDontWantToRerender from './heavyComputations';

export default function IneffectiveFunctionalComponent() {
  const [value, setValue] = useState(1);

  const valueChanger = () => {
    setValue(Math.random());
  }
  return (
    <IDontWantToRerender valueChanger={valueChanger} value={value} />
  )
}

Answer 1

您可以使用useCallback 挂钩。

const valueChanger = useCallback(
    () => {
        setValue(Math.random());
    },[setValue]); // you need some other dependencies for when it should change

如cmets中所说

我想知道，是否真的有必要传递 setValue 因为它不会改变？

是的，如果你看一下docs，它会说

注意

依赖数组不作为参数传递给回调。但是，从概念上讲，这就是它们所代表的含义：回调中引用的每个值也应该出现在依赖项数组中。将来，足够先进的编译器可以自动创建这个数组。

我们建议在我们的 eslint-plugin-react-hooks 包中使用exhaustive-deps 规则。当依赖项指定不正确时，它会发出警告并建议修复。