javascript - 下面的 react 代码有什么区别？

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

第一个是功能组件(有时称为“无状态组件”或“无状态功能组件”)。建议尽可能使用第一个。但是，如果您需要状态或想要使用生命周期方法，则必须使用 React.Component。