React：何时使用基于ES6类的组件与功能ES6组件？

作者: Just do it
发布时间: 2024-02-13 01:34:07 (4月前)
转自：

3 条回复

0#
回复此人
威斯特 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> 功能组件不比基于类的组件更轻量级，“它们与类完全相同。” - <a href="https://github.com/facebook/react/issues/5677" rel="nofollow noreferrer"> https://github.com/facebook/react/issues/5677 </A> 上面的链接有点过时，但React 16.7.0的文档说功能和类组件： “等同于React的观点。” - <a href="https://reactjs.org/docs/components-and-props.html#stateless-functions" rel="nofollow noreferrer"> https://reactjs.org/docs/components-and-props.html#stateless-functions </A> 除了语法之外，功能组件和仅实现render方法的类组件之间基本上没有区别。 在将来（引用上面的链接）“我们[React]可能会添加这样的优化。” 如果您试图通过消除不必要的渲染来提高性能，则这两种方法都会提供支持。 <code> memo </code> 用于功能组件和 <code> PureComponent </code> 对于课程。 - <a href="https://reactjs.org/docs/react-api.html#reactmemo" rel="nofollow noreferrer"> https://reactjs.org/docs/react-api.html#reactmemo </A> - <a href="https://reactjs.org/docs/react-api.html#reactpurecomponent" rel="nofollow noreferrer"> https://reactjs.org/docs/react-api.html#reactpurecomponent </A> 这完全取决于你。如果你想要更少的样板，那就去功能吧。如果你喜欢函数式编程而不喜欢类，那就去实用吧。如果您想要代码库中所有组件之间的一致性，请使用类。如果您在需要类似的东西时厌倦了从功能到基于类的组件的重构 <code> state </code> ，上课。 的 2019年1月更新 </强> 随着介绍 <a href="https://reactjs.org/docs/hooks-intro.html" rel="nofollow noreferrer"> 反应钩 </A> 似乎React团队希望我们尽可能使用功能组件（这更好地遵循JavaScript的功能性质）。这有助于您编写更简单的组件，重用有状态逻辑，并摆脱类周围的所有icky（如 <code> this </code> ）。 </DIV>

编辑
1#
回复此人
纾潆锦袖迷子 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> 你有正确的想法。如果您的组件除了接受一些道具和渲染之外没有其他功能，那么请继续使用。您可以将它们视为纯函数，因为它们将始终呈现并表现相同，给定相同的道具。此外，他们不关心生命周期方法或有自己的内部状态。 因为它们是轻量级的，所以将这些简单的组件编写为功能组件是非常标准的。 如果您的组件需要更多功能，例如保持状态，请改用类。 更多信息： <a href="https://facebook.github.io/react/docs/reusable-components.html#es6-classes" rel="noreferrer"> https://facebook.github.io/react/docs/reusable-components.html#es6-classes </A> </DIV>

编辑

登录后才能参与评论