时间戳

首页 > 解决方案 > 防止在使用 useState 的功能组件中将新函数作为道具传递

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

问题描述

我知道将每个渲染的新函数作为道具传递给反应组件会影响性能（例如传递箭头函数）。在类组件中，我通常通过传递类的方法来解决这个问题。但是假设我们有一个使用 say 的功能组件，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} />
  )
}

标签： reactjsclosuresreact-hooks

解决方案

您可以使用useCallback 挂钩。

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

正如评论中所说

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

是的，如果您查看文档，它会说

笔记

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

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

推荐阅读