我试图了解无状态组件以及这些示例之间的区别:
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>
);
或者是否有任何区别?
最佳答案
在功能上,绝对没有区别。两者最终都呈现一个段落元素,但还有其他方面需要考虑。在检查这两种方法时,(在我看来)需要说明三点:
- 可重用性:您必须了解在需要时分离组件。如果
renderAFunction
只是为了生成一些 JSX,例如,基于 API 请求,那么在方法中就可以了。但是如果你想在其他地方重用它,那么将它分离到它自己的组件中。 React 的很大一部分是组件的可重用性和摆脱代码重复。必须将方法分离到它自己的组件中才能实现这一点。 - 目的:有理由使用无状态功能组件,也有理由不使用。无状态功能组件的全部要点是没有状态和表现形式。如果您需要做一些涉及 React 生命周期或内部状态的事情,请将其保留为方法或新类,具体取决于您是否希望它可重用。
- 性能:使用无状态功能组件效率会较低。这是因为它是一个组件,而不仅仅是从方法返回的一些 JSX。截至目前,React 团队计划对无状态功能组件进行一些优化,因为它们不包含状态而只是表示,但这可能要等到 React Fiber 完成后才会发生,因此你的无状态功能组件 与常规的成熟类组件相比没有优化。与返回一些 JSX 的方法相比,这使得它非常低效,特别是如果它只在另一个组件中使用一次。
一个好的经验法则是问问自己,我在其他任何地方都需要它吗?如果没有,则将其保存在方法中。如果你在其他任何地方都不需要它,将 JSX 分离到一个单独的组件中会产生更差的性能并且不遵循 React 的核心原则。
如果您将在其他地方需要它,那么分离组件以便您遵循 React 的可重用性概念。
关于javascript - 使用无状态功能组件与调用方法有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35188651/