首页 文章

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

提问于
浏览 次
115

花了一些时间学习React后，我理解了创建组件的两个主要范例之间的区别

我的问题是我什么时候应该使用哪一个？为什么？一个在另一个上有什么好处/权衡？

ES6 / 7课程：

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

功能：

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

只要没有任何状态被该组件操纵，我就会想到功能......但是这样吗？

我猜我是否使用任何生命周期方法，最好使用基于类的组件 .

javascript reactjs ecmascript-6 redux

3 回答

  • 4

    功能组件不比基于类的组件更轻量级，"they perform exactly as classes." - https://github.com/facebook/react/issues/5677

    上面的链接有点过时，但React 16.3.1的文档说明功能和类组件：

    "are equivalent from React’s point of view." - https://reactjs.org/docs/components-and-props.html#stateless-functions

    除了语法之外，功能组件和仅实现render方法的类组件之间基本上没有区别 .

    在我看来，一致性是要走的路 . 我经常使用基于类的组件来实现“附加功能”，例如状态，但也喜欢将它们用于我的“功能组件”，只是为了保持一致 .

    在将来（引用上面的链接）"we [React] might add such optimizations"但是现在我的团队已经发现一致性是最好的选择（特别是对于不可避免的新开发人员而言，并且对于 this.props 去了或者意外地命名功能组件中的其他东西感到困惑） .

    回复于
  • 29

    始终尽可能尝试使用无状态功能（功能组件） . 在某些情况下，您需要使用常规的React类：

    • 组件需要维护状态

    • 组件重新渲染太多，您需要通过 shouldComponentUpdate 来控制它

    • 你需要container component

    更新

    现在有一个名为 PureComponent 的React类，您可以扩展（而不是 Component ），它实现了自己的 shouldComponentUpdate ，为您处理浅层道具比较 . Read more

    回复于
  • 88

    你有正确的想法 . 如果你的组件没有做太多的东西而不是接受一些道具和渲染，那么就去使用 . 您可以将这些视为纯函数，因为它们将始终呈现并表现相同，给定相同的道具 . 此外，他们不关心生命周期方法或有自己的内部状态 .

    因为它们是轻量级的，所以将这些简单的组件编写为功能组件是非常标准的 .

    如果您的组件需要更多功能，例如保持状态，请改用类 .

    更多信息：https://facebook.github.io/react/docs/reusable-components.html#es6-classes

    回复于

相关问题