Question

我一直在尝试使用React Hooks，因此避免使用类。在最近的代码审查中，我的一位同事建议我使用类组件而不是使用Hooks的功能组件来重写我的组件。他的观点是，每次渲染我的组件时，所有“内部成员函数”都会重新创建，这可能会导致性能下降。我的印象是，React团队希望人们尽可能放弃课程。在无状态功能组件中包含大量辅助功能是否真的会导致性能下降？

const Foo = () => {
   const helper = () => {
      doSomething()
   }
   return (<View />)
 }

OR

class Bar extends Component {
   helper = () => {
      doSomething()
   }
   render() {
      return (<View/>)
   }
}

Answer 1

在第一个示例中，每次运行Foo时都必须创建一个新的函数对象。因此，除非JavaScript引擎可以对其进行优化，否则就不需要内存流失。（当然，与几乎所有性能问题一样，当您遇到性能问题时，也要担心这种事情。尽管如果您在许多小型组件中进行此操作，则可能会加起来。）

根据helper的需求，您可以在SFC之外定义它，然后在其中使用它。

// I'm assuming this is in a module, so it's not a global
const helper = () => {
    doSomething()
}

const Foo = () => {
    // Presumably you use `helper` here somewhere
    return (<View />)
}

如果出于某种原因您不使用模块（!!），则为了避免helper成为全局变量，您可以执行通常的作用域检查。也许：

const Foo = (() => {
    const helper = () => {
        doSomething()
    }

    return () => {
        // Presumably you use `helper` here somewhere
        return (<View />)
    }
})()

Answer 2

您的同事在技术上是正确的，即内部函数将在每次对render()的调用上实例化并绑定，但是除非您非常频繁地渲染大量组件（由于状态快速更改或其他原因）），总费用应该可以忽略不计。

Answer 3

您每次编写组件时都会重新创建您编写的辅助函数。您不必像在组件内那样定义辅助函数。如果您真的想在项目中使用React Hooks，请查看在不同情况下适合您需求的钩子。例如，如果您需要帮助函数来对用户交互调用某些操作，则可以使用useCallback。您的代码将如下所示：

const Foo = () => {
   const helper = useCallback(() => {
      doSomething()
   }, []);
   return (<View />)
 }

此功能仅在第一个渲染器上创建。如果您的函数依赖于某些道具，则可以将这些道具作为输入值传递给useCallback。发生更改时将重新创建此回调。例如：

const Foo = (props) => {
   const helper = useCallback(() => {
      doSomething(props.id);
   }, [props.id]);
   return (<View />)
 }

在功能性无状态React组件中是否有很多内部“辅助”功能会导致性能下降

3 个答案: