时间戳

首页 > 解决方案 > React scafolds 函数而不是默认的类声明

reactjs - React scafolds 函数而不是默认的类声明

问题描述

我完全是来自 Angular Typescript 背景的新手。我选择使用 Typescript 学习 React 是为了让我的过渡比使用 javascript 学习 React 更容易。有人可以让我知道关于 React with Typescript 的精彩基本视频吗？有关于复数视觉的基本视频，但可以使用 javascript 进行演示。

我使用 create-react-app 命令创建了一个应用程序，该命令具有反应项目的脚手架。

我注意到该文件具有以下 const 声明，而我在视频中看到的示例显示了带有渲染方法的类声明。有人可以解释一下吗？

脚手架输出

import React from 'react';
import logo from './logo.svg';
import './App.css';

const App: React.FC = () => {
  return (
    <div className="App">

    </div>
  );
}

export default App;

例子

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
  return (
    <div className="App">

    </div>
  );
  }
}

export default App;

标签： reactjstypescript

解决方案

在 React 中有 2 种方法来定义组件：使用函数（功能组件）或使用类（类组件），您可以在此处查看确切的差异。Dan Abramov的这篇文章也攻击了该主题（并在内部提供了良好实践）。

但基本上，这两种定义都可以，但是您必须确定要如何使用组件，以便在功能组件或类组件之间做出决定。这里的另一个好资源。

同样对于反应培训课程，您可以查看以下资源：

推荐阅读