Question

最近，我一直在以功能的方式编写越来越多的反应组件，因为大多数组件都不需要生命周期功能或状态。在我的组件内部（这也是函数）我定义了辅助函数 - onClick函数和所有爵士乐。但现在我在想这是不是很好的做法？由于为每个渲染调用了该函数，它是否会重新创建所有内部函数？我对记忆丧失感到好奇，以及我是否做错了......一个组件的例子：

import React from 'react';
import { connect } from 'react-redux';

import ProductSearch from '../Plan/components/ProductSearch';

const BlockedProducts = (props) => {
  const onSelectProduct = (product_key) => {
    console.log(product_key);
  };

  return (
    <ProductSearch onSelectProduct={ onSelectProduct } />
  );
};

export default connect()(BlockedProducts);

Answer 1

是的，由于每次渲染BlockedProducts时都要声明一个函数，肯定会有一些性能受到影响。如何有效地从垃圾收集中清理我不知道，但最好不要按你的运气。

React中的功能组件实际上是完全无状态的，而不是＆＃34;做＆＃34;除表现之外的任何东西。理想的功能组件只返回一些JSX / HTML来渲染，没有花里胡哨的东西。在我看来，一个功能组件应该只有一个返回，一旦你开始添加内部函数，它应该升级到一个完整的React类。

Answer 2

您可以将onSelectProduct声明从BlockedProducts范围移到组件上方。它将对组件的范围进行闭包，因为BlockedProducts声明与onSelectProduct在同一范围内。

我不认为它会导致一些性能问题。我同意@jered - 无状态组件应该尽可能简单，所以尽量不做任何业务逻辑。

Answer 3

我最近遇到了同样的问题。 https://github.com/yannickcr/eslint-plugin-react/issues/357 Daniel讨论了这种方法会增加GC工作量，因此他使用类组件。

我认为首先，所有类组件都用于处理生命周期和状态，并且它们还通过创建支持bean来对性能产生影响，后者假设处理生命周期和状态。

因此，我会使用功能类，并在出现真正的性能问题时创建类组件

顺便说一下，10个月过去了，我很好奇你最终坚持哪种方法？

这是反应功能组件的良好实践吗？

3 个答案: