React函数组件｜青训营在 React 中，有两种常见的组件写法：函数（hooks）组件和类组件。函数组件是最简

在 React 中，有两种常见的组件写法：函数（hooks）组件和类组件。

函数组件是最简单的一种写法，它是一个纯函数，接收一些属性(props)并返回一个 React 元素。函数组件通常用于展示静态内容或简单的 UI 组件。以下是一个简单的函数组件的示例：

import React from 'react';

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>{props.message}</p>
    </div>
  );
}

在 React 社区中，函数组件已经成为编写新的组件的首选方式，而类组件则更多地用于维护旧代码或处理特定的复杂场景。这是由于函数组件具有许多优势，如代码简洁、易于理解、测试和维护，以及使用 Hooks 提供的强大功能。个人认为，函数组件相较于类组件更加简便好用，虽然有人告诉我新手入门用类组件更好，但是我自己实践认为，函数组件更加简单易懂。以下是我在项目中用到的实践

const RouteButton :  React.FC = () =>{
	return(
			<div className={styles['route-button']}>
				<Button className="input-item submit-btn">运行</Button>
				<Button className="input-item submit-btn">取消</Button>
			</div>
	)
}

函数组件和类组件各有优缺点，但是函数组件更简洁，开发更容易；
类组件过多的使用this让整个逻辑看起来很混乱；
React团队主推的React hooks功能也只支持函数组件；
React团队针对函数组件做了更多的优化来避免非必要的检查和内存泄漏；
React团队也在努力将hooks功能引入类组件，所以没必要将现有的类组件都改写成函数组件；
类组件功能最为完备和强大，某些特殊用途(如错误边界)组件只能写成类式组件。函数组件没有this困扰且代码简洁，大部分的普通组件都可以写成函数组件。但是类组件也会因大量使用 this 而让人感到困惑。使用功能组件可以很容易地避免这种缺点，保持代码整洁。

React函数组件 ｜ 青训营

React函数组件｜青训营