内部函数是否需要参数来访问 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

首先，不推荐这种在函数中包含函数的方法，它经常证明性能代价高昂，是的，如果你必须使用你需要将道具传递给它们。另请参阅此 link

Answer 2

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

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

Answer 3

在函数中使用函数是完全没问题的。如果你应该使用useCallback，你可以阅读各种文章。我待会再说。

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

至于性能，一般来说还可以！但是，每次您的组件呈现时，function1 和 function2 都会被重新定义。它们将具有完全相同的功能（除非 d3 更改），但具有不同的引用，因此旧的 function1 !== 新的 function1 即使它们做同样的事情。这就是为什么这很重要...

不过要多一点开销（每个组件的渲染，可能会保存其他组件的许多渲染或 useEffect 执行），如果它应该重新定义 function1 或 function2 如果不是，它会保留相同的引用。这就是 useCallback 所做的。老实说，如果我不确定该函数是否会导致我出现问题，我会使用 useCallback。一个例子是子组件将 function1 作为 prop 传入。除非您使用 useCallback.

，否则该道具将始终在父项的每次渲染中被评估为新值，因为它是一个新引用

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

Are parameters needed for inner functions to access props + variables of a React Functional Components

reactjs

react-props

react-functional-component

编辑