内部函数是否需要参数来访问 React 功能组件的 props + 变量

Question

我有一个功能组件，里面有几个功能。在下面的示例中，内部函数是function1 和function2。我试图弄清楚是否需要将功能组件的道具（prop1、prop2）以及功能组件中的其他声明变量（variable1、variable2）显式传递给这些内部函数。这是一个例子：

import React from 'react'
import * as d3 from 'd3';

function MyFunction({prop1, prop2}) {
    const variable1 = '#333333';
    const variable2 = 'Jimmy';

    const function1 = () => {
        d3.select('g.g1')
            .append('rect')
            .attr('color', variable1)
    }

    const function2 = () => {
        d3.select('g.g2')
            .append('text')
            .text(prop1.label)
    }

    return (
        <svg>
            <g className='g1' />
            <g className='g2' />
        </svg>
    );
}

export default MyFunction;

如果我不必显式声明 function1 和 function2 的参数以便能够使用这些 props + 在上层范围内声明的其他变量，这似乎简化了我的代码，但是我不确定这是否是一个不好的做法，或者这是否会导致我的代码出现其他问题。这样可以吗？

编辑

想要指出的是，事实上，这似乎没有任何问题。我的问题更多的是 - 我应该这样做/可以吗/这样做我可能会遇到问题吗？

Answer 1

在函数中使用函数是完全可以的。如果您应该使用useCallback，您可以阅读各种文章。我一会儿再谈。

不，您不需要将道具传递给每个函数。其原因是闭包及其捕获的内容。 Here 是关于闭包的一些读物。如果他们引用它，您的箭头函数将关闭 props 变量。所以不，您不需要通过它，并查看该链接。如果你真的想深入挖掘，第 2 章。

至于性能，通常没问题！不过，每次渲染组件时，function1 和 function2 都会重新定义。它们将具有完全相同的功能（除非 d3 更改），但具有不同的引用，因此旧的 function1 !== 新的 function1 即使它们做同样的事情。这就是为什么这很重要......

尽管需要更多开销（每次渲染组件，可能会节省许多其他组件的渲染或 useEffect 执行），您可以进行反应分析，是否应该重新定义 function1 或 function2，如果不是，它保持相同的参考。这就是useCallback 所做的。老实说，如果我不确定该功能是否会给我带来问题，我会使用useCallback。例如，当子组件将 function1 作为 prop 传入时。除非您使用useCallback，否则该道具将始终在父级的每次渲染中被评估为新值，因为它是一个新参考。

Answer 2

您确实希望将道具作为显式参数传递。只要你不传递任何你不使用的道具（例如上面的prop2），你的代码不会因为省略它们而变得更简单。尤其是随着您对它们的用例以及需要它们的功能的增长，这实际上可以防止冗长的代码。

但是，正如您自己发现的那样，工作组件不需要它。 react 文档在所有示例中都显示了这一点。对于前 - 访问此link。

Answer 3

首先，不推荐这种在函数中包含函数的方法，它经常证明性能开销很大，是的，如果你必须使用，你需要将道具传递给它们。另见此链接here