以下反应代码有什么区别？

Question

我遇到了以下 material - ui 示例代码。

import React from 'react';
import AppBar from 'material-ui/AppBar';

/**
 * A simple example of `AppBar` with an icon on the right.
 * By default, the left icon is a navigation-menu.
 */
const AppBarExampleIcon = () => (
  <AppBar
    title="Title"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
  />
);

export default AppBarExampleIcon;

但根据我的教程经验，应该从 React.Component 继承以创建组件。示例可以是

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!!
         </div>
      );
   }
}

export default App;

谁能告诉我为什么会有差异？

Answer 1

第一个是功能组件（有时称为 "stateless component" 或 "stateless functional component"）。建议尽可能使用第一个。但是，如果您需要状态或想要使用生命周期方法，则必须使用 React.Component.

以下反应代码有什么区别？

whats the difference in the following react code?

javascript

reactjs

es6-class