React函数式写法和类式写法的区别(以一个计数器功能为例子)


函数式写法更加简洁和函数式编程思维导向,适用于无状态、UI纯粹的组件,且可以使用Hooks处理副作用。而类式写法适用于有内部状态、生命周期方法和复杂交互逻辑的组件,提供了更多的灵活性和控制力。

文章目录

一、计数器功能演示

1.函数式写法

2.类式写法

二、函数式和类式的区别

三、函数式和类式在代码方面的不同


一、计数器功能演示

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,如useStateuseEffect等来管理状态、副作用和订阅等行为。Hooks提供了一种在函数组件中使用类组件类似功能的方式。

类式写法:

  • 类组件:在React中,可以通过继承React.Component类来创建组件。类组件具有内部状态和生命周期方法,允许组件拥有更多的复杂逻辑和交互。
  • 内部状态:类组件可以通过state属性来存储和更新内部数据。使用setState方法可以触发组件的重新渲染,并在必要时执行相关操作。
  • 生命周期方法:类组件具有一系列生命周期方法(如componentDidMountcomponentDidUpdate等),可以在特定的时刻执行一些操作,例如数据获取、订阅和清理等。

其他共同知识点:

  • JSX:函数式和类式写法都使用JSX来描述UI层的结构和组件关系。JSX是一种将HTML标记和JavaScript代码结合的语法扩展。
  • 属性传递:在函数式和类式组件中,通过属性(props)来传递数据和回调函数,使得组件之间可以共享信息和交互。

三、函数式和类式在代码方面的不同

  • 状态管理:

    • 函数式写法:使用React Hooks中的useStateuseReducer等钩子来管理组件的状态。
    • 类式写法:通过构造函数中的this.state来初始化并通过this.setState方法进行状态更新。
  • 生命周期:

    • 函数式写法:函数式组件没有生命周期方法,但可以使用useEffect钩子来处理组件挂载、更新和卸载时的副作用。
    • 类式写法:通过重写类的生命周期方法(如componentDidMountcomponentDidUpdatecomponentWillUnmount等)来处理组件生命周期事件。
  • 组件通信:

    • 函数式写法:通过属性(props)传递数据和回调函数来实现父子组件之间的通信,也可以使用Context API或第三方库(如Redux)进行全局状态管理。
    • 类式写法:同样通过属性(props)传递数据和回调函数来实现父子组件之间的通信,也可以使用Context API或Redux等进行全局状态管理。此外,类组件还可以通过ref引用来获取或操作子组件。
  • 内部状态和方法:

    • 函数式写法:函数式组件没有内部状态(state)和实例方法(method),只关注接收属性和渲染UI。
    • 类式写法:类组件可以通过this.state来定义内部状态,并通过类的方法来操作和更新状态。
  • 组件的性能优化:

    • 函数式写法:使用React.memo进行函数组件的记忆化,以避免不必要的重渲染。
    • 类式写法:使用shouldComponentUpdate或React.PureComponent来避免不必要的重渲染。
相关推荐
持久的棒棒君3 小时前
npm安装electron下载太慢,导致报错
前端·electron·npm
crary,记忆5 小时前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
门前云梦6 小时前
《C语言·源初法典》---C语言基础(上)
c语言·开发语言·学习
漂流瓶jz6 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou06 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干6 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大7 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu7 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
sjtu_cjs7 小时前
Tensorrt python api 10.11.0笔记
开发语言·笔记·python
哆啦A梦的口袋呀7 小时前
深入理解系统:UML类图
开发语言·python·uml