函数式写法更加简洁和函数式编程思维导向，适用于无状态、UI纯粹的组件，且可以使用Hooks处理副作用。而类式写法适用于有内部状态、生命周期方法和复杂交互逻辑的组件，提供了更多的灵活性和控制力。
文章目录
一、计数器功能演示
1.函数式写法
代码如下（示例）：
c
import React, { useState } from 'react';
const CounterFunctional = () => {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<h2>Counter (Functional)</h2>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
};
export default CounterFunctional;使用useState钩子来声明一个名为count的状态变量，并通过setCount函数更新它。当点击按钮时，调用increment函数来增加计数器的值。
2.类式写法
代码如下（示例）：
c
import React from 'react';
class CounterClass extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h2>Counter (Class)</h2>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
export default CounterClass;定义了一个名为CounterClass的类组件。在构造函数中初始化了一个count的状态属性。increment方法被定义在类的原型上，用于增加计数器的值。在render方法中，我们通过this.state.count访问状态值，并将其渲染到UI中。
二、函数式和类式的区别
函数式写法：
- 纯函数：函数式组件本质上是一个纯函数，接收输入参数（
props）并返回输出结果（JSX元素）。它没有内部状态，只依赖于传入的属性进行渲染和处理逻辑。- 函数组件：在React中，可以使用函数来定义组件。使用函数组件能够更简洁地编写UI组件，尤其是对于无需内部状态或生命周期方法的简单组件而言。
- React Hooks：函数式组件可以使用React Hooks，如
useState、useEffect等来管理状态、副作用和订阅等行为。Hooks提供了一种在函数组件中使用类组件类似功能的方式。类式写法：
- 类组件：在React中，可以通过继承
React.Component类来创建组件。类组件具有内部状态和生命周期方法，允许组件拥有更多的复杂逻辑和交互。- 内部状态：类组件可以通过
state属性来存储和更新内部数据。使用setState方法可以触发组件的重新渲染，并在必要时执行相关操作。- 生命周期方法：类组件具有一系列生命周期方法（如
componentDidMount、componentDidUpdate等），可以在特定的时刻执行一些操作，例如数据获取、订阅和清理等。其他共同知识点：
- JSX：函数式和类式写法都使用JSX来描述UI层的结构和组件关系。JSX是一种将HTML标记和JavaScript代码结合的语法扩展。
- 属性传递：在函数式和类式组件中，通过属性（props）来传递数据和回调函数，使得组件之间可以共享信息和交互。
三、函数式和类式在代码方面的不同
状态管理：
- 函数式写法：使用React Hooks中的
useState、useReducer等钩子来管理组件的状态。- 类式写法：通过构造函数中的
this.state来初始化并通过this.setState方法进行状态更新。生命周期：
- 函数式写法：函数式组件没有生命周期方法，但可以使用
useEffect钩子来处理组件挂载、更新和卸载时的副作用。- 类式写法：通过重写类的生命周期方法（如
componentDidMount、componentDidUpdate、componentWillUnmount等）来处理组件生命周期事件。组件通信：
- 函数式写法：通过属性（props）传递数据和回调函数来实现父子组件之间的通信，也可以使用Context API或第三方库（如Redux）进行全局状态管理。
- 类式写法：同样通过属性（props）传递数据和回调函数来实现父子组件之间的通信，也可以使用Context API或Redux等进行全局状态管理。此外，类组件还可以通过
ref引用来获取或操作子组件。内部状态和方法：
- 函数式写法：函数式组件没有内部状态（state）和实例方法（method），只关注接收属性和渲染UI。
- 类式写法：类组件可以通过
this.state来定义内部状态，并通过类的方法来操作和更新状态。组件的性能优化：
- 函数式写法：使用React.memo进行函数组件的记忆化，以避免不必要的重渲染。
- 类式写法：使用shouldComponentUpdate或React.PureComponent来避免不必要的重渲染。