时间戳

首页 > 解决方案 > 在 React 中创建/使用组件的差异

javascript - 在 React 中创建/使用组件的差异

问题描述

我一直在按照几个不同的教程学习 React，我注意到创建组件时存在一些差异。

在一个 App.js 文件中，组件的制作如下：

import React, { Component } from "react";
import { BrowserRouter as Router, Route } from 'react-router-dom';

import ListEmployees from "./components/listEmployees";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route exact path="/" component={ListEmployees} />
          
        </div>
      </Router>
    )
  }
}

export default App;

而在另一个项目中，组件的创建方式如下：

import React, { Fragment, Component } from "react";
import { BrowserRouter as Router, Route } from 'react-router-dom';
import './App.css';

import ListEmployees from "./components/listEmployees";
import displayNavbar from "./components/navbar";

const App = () => {
  return (
    <Fragment>
      <div className="container">
        <ListEmployees />
      </div>

    </Fragment>
  )
}

export default App;

这两个组件之间有什么区别，使用一种方法比另一种方法有什么优势？

标签： javascriptreactjs

解决方案

您给出的第一个示例是一个类组件。第二个是功能组件。

类组件是制作组件的原始方式。根据 Facebook 的说法，功能组件是未来。

官方文档： https ://reactjs.org/docs/components-and-props.html

推荐阅读