这是反应功能组件的好习惯吗？答案

【问题标题】：Is this good practice for react functional components?这是反应功能组件的好习惯吗？
【发布时间】：2017-03-22 22:20:32
【问题描述】：

最近我一直在以函数式风格编写越来越多的 React 组件，因为它们中的大多数不需要生命周期函数或状态。在我的组件内部（同样是函数），我定义了辅助函数——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);

【问题讨论】：

标签： javascript reactjs functional-programming garbage-collection components

【解决方案1】：

是的，由于每次渲染BlockedProducts 时都要声明一个函数，因此肯定会影响性能。我不知道从垃圾收集中清理它的效率如何，但似乎最好不要碰运气。

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

【讨论】：

利用其他功能或将无状态事件处理程序附加到其子元素/组件的功能组件没有任何问题。只有当你需要状态或生命周期钩子时，你才应该升级到有状态的组件。

【解决方案2】：

您可以将 onSelectProduct 声明从 BlockedProducts 范围中移出，方法是将其放在组件上方。它将关闭组件的范围，因为BlockedProducts 声明将与onSelectProduct 在同一范围内。

我认为这不会导致一些性能问题。我确实同意@jered - 无状态组件应该尽可能简单，所以尽量不要在那里制作任何业务逻辑。

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：