javascript - 使用功能组件传递 props，而不在组件内声明功能

Question

我迭代项目列表并想要调用函数 onClick()。下面的例子:

class App extends Component {
    state = { items: [1, 2, 3, 4] };

    click = i => console.log(i);

    render() {
        return (
            <div>
                {this.state.items.map(item => (
                    <div 
                        key={item} 
                        // this works fine, but I rather not declare functions within the render function / JSX
                        onClick={() => this.click(item)}
                    >
                        {`click on # ${item}`}
                    </div>
                ))}
            </div>
        )
    }
}

如您所见，我在 JSX 中声明了一个函数。我一遍又一遍地这样做，但不久前我了解到，出于性能原因，您应该避免在组件 JSX 本身中声明函数。

对于功能组件来说也是如此吗？如果是这样，是否有其他方法可以将动态信息(在本例中为项目)传递给回调？

注意:我期待在某个时候使用钩子(Hook)，但现在我只想知道不使用它们的最佳实践。

注二:话虽这么说，如果您确定这是一个相关问题并且由于钩子(Hook)而直到现在才得以解决，我显然想了解这一点:)

Answer 1

Is this true, also for functional components?

实际上，您的代码中没有使用任何功能组件。在经常调用的函数(例如 render())中执行的所有操作都会导致性能下降，无论是函数还是变量声明或调用。减少是否重要是另一回事。

And if so, is there any other way to pass dynamic information (item, in this case) to a callback?

你可以.bind(...)它:

 onClick = {console.log.bind(console, item) }

但实际上，您是否注意到重新渲染有任何延迟？可能不是，如果是这样，那不是由函数声明引起的。编写对您来说看起来很漂亮的代码，不要针对编译器进行优化，让编译器来做。

but some time ago I learned that you should avoid declaring a function within the component JSX itself

您不应该真正避免它，而应该尽可能选择其他方式。在这种情况下，确实没有更好的方法，所以就用它吧。