Javascript 性能-功能组件内的功能

我对功能组件具有内部功能时的性能有一些疑问

当有一个具有内部函数的功能组件时，是否会在每次渲染时一次又一次地重新创建该内部函数？ 在这种情况下，如果我要用

React.memo（）

记忆组件，该函数也会被记忆吗

下面是我所指的一个虚拟示例：

const MyComponent = React.memo(({genre, name}) => {
    const someFunction = genre => {
        return (genre === 'male') ? 'Mr.' : 'Ms.';
    }

    return (
        <h1>Hello {someFunction(genre)} {name}!</h1>
    );
});

constmycomponent=React.memo（{genre，name}）=>{
const someFunction=genre=>{
返回（体裁=='男性'）？'先生'：'女士'；
}
返回(
你好{someFunction（genre）}{name}！
);
});

来自以下文档：

钩子是否因为在渲染中创建函数而变慢？

不，在现代社会 在浏览器中，闭包与类相比的原始性能并不重要 除极端情况外，差异显著。 [……]

传统上，关于React中内联函数的性能问题 与如何在每次渲染中断时传递新回调有关 应在子组件中更新优化。钩子 从三个方面来处理这个问题

• useCallback钩子允许您在 重新渲染，以便shouldComponentUpdate继续工作：

• useMemo钩子可以更容易地控制单个孩子 更新，减少对纯组件的需求

• 最后，useReducer钩子减少了传递回调的需要 如下文所述，这是一个深刻的问题

阅读更多

同样在您的示例中，您可以将内部函数放在函数组件的外部，因为它不使用组件内部的任何内容，如下所示：

const someFunction = genre => {
    return (genre === 'male') ? 'Mr.' : 'Ms.';
}

const MyComponent = React.memo(({genre, name}) => {
    return (
        <h1>Hello {someFunction(genre)} {name}!</h1>
    );
});

const someFunction=genre=>{
返回（体裁=='男性'）？'先生'：'女士'；
}
const MyComponent=React.memo（{genre，name}）=>{
返回(
你好{someFunction（genre）}{name}！
);
});

谢谢你的回答，但这个问题有点技术性。即使我们做得很艰难，也可以将该功能从组件中移除，问题是是否会因为该内部功能未被移除而影响性能。在这种情况下，会在每次渲染时重新创建该函数（这可能会稍微降低性能），还是会通过某种黑魔法对其进行优化？不管怎样，你为什么要在桌子上挂钩子？我的示例中没有钩子。@zherofilia是的，不同代码的性能是不同的。但差别如此之小，以至于你不会注意到（医生强调了这一点）。首先写干净的代码。@Bergi非常感谢，伙计，这正是我想听到的（：的确，干净的代码是第一位的，但这是在与一位朋友辩论时产生的疑问。