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

Question

我有一个功能组件，里面有几个功能。在下面的示例中，内部函数是 function1 和 function2。我想弄清楚是否需要显式传递功能组件的 Prop (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，您可以阅读各种文章.稍后我会讨论这个。

不，您不需要将 props 传递给每个函数。这样做的原因是闭包及其捕获的内容。 Here是在关闭的情况下对它的一些阅读。如果他们引用它，你的箭头函数会关闭 props 变量。所以不，你不需要通过它，并检查那个链接。如果你真的想深入挖掘，还有第 2 章。

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

不过，为了多一点开销(每个组件的渲染，可能会保存其他组件的许多渲染或 useEffect 执行)，如果它应该重新定义 function1，您可以进行 react 分析。或 function2如果不是，它会保留相同的引用。这就是useCallback做。老实说，我用 useCallback如果我不确定该功能是否会给我带来问题。一个例子是子组件有 function1作为 Prop 传入。除非您使用 useCallback，否则该 Prop 将始终在父级的每个渲染器上被评估为新值，因为它是一个新引用。 .