javascript - 使用无状态功能组件与调用方法有什么区别？

Question

我试图了解无状态组件以及这些示例之间的区别:

class App {
  render() {
    return (
      <div>
        {this.renderAFunction('hello')}
      </div>
    );
  }
  renderAFunction(text) {
    return (
      <p>{text}</p>
    );
  }
}

还有这个:

class App {
  render() {
    return(
      <div>
        <RenderAFunction text='hello'/>
      </div>
    );
  }
}

const RenderAFunction = ({text}) => (
    <p>{text}</p>
);

或者是否有任何区别？

Answer 1

在功能上，绝对没有区别。两者最终都呈现一个段落元素，但还有其他方面需要考虑。在检查这两种方法时，(在我看来)需要说明三点:

• 可重用性:您必须了解在需要时分离组件。如果 renderAFunction 只是为了生成一些 JSX，例如，基于 API 请求，那么在方法中就可以了。但是如果你想在其他地方重用它，那么将它分离到它自己的组件中。 React 的很大一部分是组件的可重用性和摆脱代码重复。必须将方法分离到它自己的组件中才能实现这一点。
• 目的:有理由使用无状态功能组件，也有理由不使用。无状态功能组件的全部要点是没有状态和表现形式。如果您需要做一些涉及 React 生命周期或内部状态的事情，请将其保留为方法或新类，具体取决于您是否希望它可重用。
• 性能:使用无状态功能组件效率会较低。这是因为它是一个组件，而不仅仅是从方法返回的一些 JSX。截至目前，React 团队计划对无状态功能组件进行一些优化，因为它们不包含状态而只是表示，但这可能要等到 React Fiber 完成后才会发生，因此你的无状态功能组件 与常规的成熟类组件相比没有优化。与返回一些 JSX 的方法相比，这使得它非常低效，特别是如果它只在另一个组件中使用一次。

一个好的经验法则是问问自己，我在其他任何地方都需要它吗？如果没有，则将其保存在方法中。如果你在其他任何地方都不需要它，将 JSX 分离到一个单独的组件中会产生更差的性能并且不遵循 React 的核心原则。

如果您将在其他地方需要它，那么分离组件以便您遵循 React 的可重用性概念。