React - 无状态组件，组件内部或外部的功能

Question

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

例如：

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

伪代码：

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

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

或者

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

        return(
             <button onClick={example(params)}
        )
    }

但我也想避免：

• 渲染时调用函数
• 我不想使用“useCallback”钩子来防止创建新的引用。

如果只有一种解决方案是在父组件中创建函数并通过道具将其发送到子组件，然后调用此函数？

有人可以解释一下，如何在没有 useCallback 或 useMemo 钩子的情况下以最佳性能做到这一点？

谢谢你。

Answer 1

2021年编辑：

实现 React Hooks 后，问题不再相关 - 您可以根据需要在功能组件中声明函数。但是，如果您想避免子项重新渲染，您可以使用useCallback钩子包装您的函数，以便函数实例保留在渲染之间。

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

https://reactjs.org/docs/hooks-reference.html#usecallback

旧答案：

我建议尽可能将您的功能保留在无状态组件之外。

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

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

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

StackBlitz 的工作示例：https ://stackblitz.com/edit/react-1m2hds

如何测试- 在输入中写一些东西，然后点击孩子。父母会重新渲染，孩子也会这样做。外箱函数fn1被推送到 window 变量test1，内箱函数fn2进入test2. 现在重复过程。如果你比较里面的函数test1->test1[0] === test1[1]将返回true，因为这两个函数是同一个实例。

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

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

最后说明：不管上面说了些什么，性能差异基本上是不明显的。

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