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

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只是为了生成一些基于API请求的JSX,那么在一个方法中就可以了.但是如果你想在其他地方重用它,那么将它分成它自己的组件.React的很大一部分是组件可重用性并且摆脱了代码重复.将方法分离到它自己的组件中是必要的.
• 目的:有理由使用无状态功能组件和不使用的原因.无状态功能组件的重点是没有状态和表现.如果您需要执行涉及React生命周期或内部状态的操作,请将其保留为方法或新类,具体取决于您是否希望它可重用.
• 性能:使用无状态功能组件效率较低.这是因为它是一个组件,而不仅仅是从方法返回的一些JSX.截至目前,React团队计划对无状态功能组件进行一些优化,因为它们不包含状态并且仅仅是表示性的,但这可能直到React Fibre完成之后才会发生,因此您的无状态功能组件没有优化与常规的完整类组件相比.与返回某些JSX的方法相比,这使得它非常低效,特别是如果它只是在另一个组件中使用过一次.

一个好的经验法则是问问自己,我是否需要在其他任何地方使用它？如果没有,那么将其保存在方法中.如果你在其他任何地方都不需要它,那么将JSX分成一个单独的组件将会有更差的性能,并且不会遵循React的核心原则.

如果您打算在其他地方需要它,那么请将组件分开,以便遵循React的可重用性概念.