Question

我知道，将每个渲染作为道具传递给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

如评论中所述

我想知道，真的必须传递setValue，因为它不会改变吗？

是的，如果您查看docs，它会说

注意

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

我们建议在我们的eslint-plugin-react-hooks程序包中使用详尽的下降规则。当错误指定依赖项时会发出警告，并提出修复建议。

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

1 个答案: