# TypeScript构建React组件：函数组件与类组件的区别
TypeScript作为一种强类型的JavaScript超集，广泛应用于React项目中。了解类型安全的同时，熟悉React的函数组件和类组件对于初学者而言至关重要。本文将帮助你理解这两种组件的区别，并通过代码示例实现一个简单的功能。
## 流程概述
以下是我们将要进行的步骤：
| 步骤 | 说明
定义组件有两个要求：组件名称必须以大写字母开头组件的返回值只能有一个根元素函数组件function Welcome (props) { return <h1>Welcome {props.name}</h1>}ReactDOM.render(<Welcome name='react' />, document.getElementById(...
原创
2022-11-23 00:08:03
63阅读
18号面试了杭州的又拍云，其中面试官问了React函数组件和类组件之间的区别，当时我只回答了有无生命周期、有无this以及state，面试完后，顿时感觉回答的很笼统，很拉，用React这么久了，连函数组件和类组件的区别都说不准，着实拉了，所以今天得空总结总结自己对于函数组件和类组件的区别： Reac ...
转载
2021-08-20 21:55:00
255阅读
2评论
区别函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了
原创
2022-09-29 16:17:38
104阅读
import React,{Component} from "react"; // export default class App extends Component{ // constructor(){ // super(); // this.state = { // message:'你好啊'
原创
2021-08-13 13:54:02
183阅读
在 React 中，类组件和函数组件是两种不同的组件定义方式。它们各有特点，适用于不同的场景。类组件 vs. 函数组件代码简洁性：函数组件
组件从概念上来看就像JS中的一个函数，它可以接收任意的输入值(称之为props),并返回一个需要在页面上展示的React元素。我们可以将UI切分成几个不同的，独立的，可复用的部分，进行单个部分即单个组件的构建，后面进行整合展示就可。 一、函数组件和类组件 组件的名称必须是大写开头，这样可以在使用时和html标签区分开来。函数组件的创建是定义一个首字母大写的函数，这个函数返回jsx，jsx它是
转载
2023-09-16 21:53:01
95阅读
一、类组件 类组件，顾名思义，也就是通过使用ES6类的编写形式去编写组件，该类必须继承React.Component 如果想要访问父组件传递过来的参数，可通过this.props的方式去访问 在组件中必须实现render方法，在return中返回React对象，如下： class Welcome e ...
转载
2021-07-27 12:18:00
320阅读
2评论
import React, { Component } from 'react' class ChildCpn extends Component{ render(){ // console.log(this.props); // {name: "Eric", age: "28"} let {nam
原创
2021-08-13 13:51:56
265阅读
先从JavaScript讲起// class Pe{ // constr
原创
2022-08-19 11:42:37
62阅读
# 在 TypeScript 中为类组件设置 `displayName`
当你在使用 TypeScript 开发 React 应用程序时，合理利用 `displayName` 属性是一个良好的开发习惯。它可以帮助你在调试时更准确地识别组件。本文将逐步引导你如何为 TypeScript 中的类组件设置 `displayName`。
## 整体流程
下面的表格描述了设置 `displayName
函数组件只有当展示视图的时候才用。做复杂的数据处理、需要有自己的状态的时候，需要用类组件。
原创
2021-11-26 15:22:10
509阅读
文章目录基本注解数组注解元组类型枚举接口注解内联类型注解特殊类型泛型注解联合类型注解交叉类型类型别名函数类型类型断言 基本注解// index.ts
let num:number;
let str:string;
let bool:boolean;
num = 123;
num = "123"; //Type 'string' is not assignable to type 'number
小例子： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react ...
转载
2021-04-25 16:48:00
282阅读
2评论
我们都知道定义组件有两个要求： 组件名称必须以大写字母开头 组件的返回值只能有一个根元素
原创
2022-06-20 14:54:02
418阅读
一、定义。1、类组件 类组件，顾名思义，也就是通过使用ES6类的编写形式去编写组件，该类必须继承React.Component 如果想要访问父组件传递过来的参数，可通过this.props的方式去访问； 在组件中必须实现render方法，在return中返回React对象，如下：class Welcome extends React.Component {
constructor(pro
typescript 简介TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍...
原创
2021-07-18 16:47:32
541阅读
