Question

当功能组件具有内部功能时，我对性能有疑问。

当具有带有内部函数的功能组件时，是否在每个渲染器上都反复创建该内部函数？在那种情况下，如果我要用React.memo()来记住该组件，那么该函数也会被记住吗？

这是我所指的虚拟例子：

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

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

Answer 1

从react Hooks文档中：

由于在渲染器中创建函数，钩子变慢了吗？

不。在现代   浏览器，与类相比，闭包的原始性能没有   除极端情况外，差异很大。   [...]

传统上，React中内联函数的性能问题   与在每个渲染中断处传递新的回调的方式有关   子组件中的shouldComponentUpdate优化。钩子   从三个方面解决这个问题。



useCallback 挂钩可让您在两个之间保持相同的回调引用   重新渲染，以便shouldComponentUpdate继续工作：



useMemo 挂钩使控制单个孩子的时间变得更容易   更新，减少了对纯组件的需求。



最后， useReducer 挂钩减少了传递回调的需要   如下所述。

了解更多here。

在您的示例中，您也可以将内部函数放在函数组件之外，因为它不使用组件内部的任何东西，像这样：

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

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

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

1 个答案: