Javascript React-无状态组件，组件内部或外部的函数

我想问一下。我应该在哪里定义React无状态组件中的函数

例如：

我想准备函数，用一些参数调用它，但我想避免在重新渲染后创建新的函数

伪代码：

    const example = (params) => {...}

    const statelessComponent = () => {
        return(
             <button onClick={example(params)}
        )
    }

const-example=（params）=>{…}
常量无状态组件=（）=>{
返回(
{
常量示例=（参数）=>{…}
返回(

2021年编辑：

在实现React钩子后，这个问题不再相关-您可以在功能组件中声明函数，只要您愿意。但是，如果您想避免子级重新呈现，您可以使用
useCallback
钩子包装函数，以便函数实例在呈现之间保持不变

const handleChange = useCallback(() => /* do stuff */, []);



旧答案：

我建议尽可能长时间地将函数保留在无状态组件之外

考虑以下示例。您的父组件重新渲染，因此SFC子组件会重新渲染（仅供参考：每次父组件重新渲染时，SFC都会重新渲染，它没有任何内置的浅层道具比较逻辑）

如果您在SFC中声明函数，它将在每次重新渲染时创建一个全新的实例

如果您在SFC之外声明函数，它将被使用n次，但函数本身将保持相同的实例

StackBlitz的工作示例：

如何测试它-在输入中写入一些内容，然后单击子项。父项将重新渲染，子项也会这样做。外框函数
fn1
被推到窗口变量
test1
，内框函数
fn2
进入
test2
。现在重复该过程。如果您比较内框函数
test1
->
test1[0]==test1[1]
将返回
true
，因为这两个函数都是相同的实例

如果比较
test2[0]===test2[1]
，它将返回
false
，因为函数的新实例已创建

注意：使用内置StackBlitz控制台进行测试

最后一点：不管上面讲了什么，性能差异基本上是不可察觉的


window.test1=[]；
window.test2=[]；
类应用程序扩展组件{
状态={
名称：“反应”
};
handleChange=（e）=>this.setState（{name:e.target.value}）；
render（）{
返回(
);
}
}
常数fn1=（）=>{}；
const Child=（{name}）=>{
常数fn2=（）=>{}；
常量签出=（）=>{
window.test1.push（fn1）；
window.test2.push（fn2）；
}
返回(
{name}
);
}
why not you want useCallback（为什么不使用回调函数）的可能重复项？我认为在组件外部定义辅助函数的性能一定会更好一些，但很难想象这会有多大的实际区别。如果辅助函数只在这一个组件中使用，我会在（函数）中定义它组件的范围，根据一般软件设计原则。
const handleChange = useCallback(() => /* do stuff */, []);