首页 > 其他分享 >React类式组件和函数式组件的区别

React类式组件和函数式组件的区别

时间:2022-11-21 23:23:28浏览次数:44  
标签:函数 hooks 复用 React 状态变量 组件 类式

React类式组件和函数式组件的区别有哪些呢?

   主要要以下几个区别:

(1)语法不同、设计思想不同
(2)生命周期、状态变量
(3)复用性:
(4)优缺点

一、语法不同、设计思想不同

函数式组件是函数式编程思想,而类组件是面向对象编程思想。面向对象编程将属性和方法封装起来,屏蔽很多细节,不利于测试。

二、生命周期、状态变量

类式组件:使用state对象定义状态变量,有诸如componmentDidMount、shouldComponentUpdate等生命周期钩子函数;

函数式组件:没有this,使用一系列的内置hooks实现对应的功能,比如使用useState创建状态变量,使用useEffect实现类似于componmentDidMount、shouldComponentUpdate等生命周期钩子函数的功能。

三、复用性

类式组件:使用hoc(高阶组件)、render propss实现组件的逻辑复用、拓展组件的功能。

函数式组件:使用自定义hooks实现组件的逻辑复用。

四、优缺点

函数式组件:

优点:

  • 相对于类式组件,一般情况而言,代码量更少,代码更简洁,可读性更强;
  • 更易于拆分组件和测试;

缺点:

  • 在业务逻辑巨复杂,状态依赖关系错乱的情况下,使用useEffect、useMemo等hooks,对其依赖项数组的思考为开发者带来了更大的心智负担;
  • 不具备处理错误边界等业务情况的hooks;

类式组件:

优点:

  • 功能完备,具有componentDidsCatch、getDerivedStateFromError等钩子函数处理边界错误;

 缺点:

  • 在复用性上,hoc组件等会出现诸如嵌套地狱、重名props被覆盖、难以拆分和测试等问题;

五、总结

类式组件和函数式组件各有其优点,关键是看自己的需求是什么;如果你开发的业务逻辑和状态并不复杂,那么类式组件可能会更合适;

但是如果你要处理错误边界或者是业务逻辑巨复杂的情况,那么类式组件更合适;

其实无论是什么技术开发,衡量代码是否优雅的标准无非是开发效率(复用性、易用性)、代码性能、是否易于测试和维护;当然三者常常不可兼得,关键看自己需求是什么;

 

 

 

  

标签:函数,hooks,复用,React,状态变量,组件,类式
From: https://www.cnblogs.com/coder-wyc/p/16913781.html

相关文章

  • vue-router组件内的守卫
    参考文档:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html路由独享的守卫进入路由之前回调   组件内的守卫     ......
  • Android 自定义标题栏组件
    1.绘制Layout文件首先新建一个layout文件,命名为title_bar,在里面绘制标题栏,我需要的是一个有返回键和当前页面标题的titleBar布局代码如下<?xmlversion="1.0"......
  • 路由懒加载和异步组件
    src/router路由懒加载:路由异步组件:......
  • 分布式流处理组件-理论篇:Kafka与安装配置
    ......
  • React native ios上架
    1.申请开发者账号,去苹果开发者中心申请2.applicationloader集申请证书、真机调试、发布于一身,避免繁琐的官网申请过程http://kxdang.com/topic/appuploader/iosdev1.htm......
  • React native ios上架
    1.申请开发者账号,去苹果开发者中心申请2.applicationloader集申请证书、真机调试、发布于一身,避免繁琐的官网申请过程http://kxdang.com/topic/appuploader/iosdev1.htm......
  • 从零到一搭建基础架构(6)-让你的服务组件化
    Hello,这里是爱Coding,爱Hiphop,爱喝点小酒的AKA柏炎。本篇是手把手搭建基础架构专栏的第六篇,......
  • VS 2022创建ATL组件 (C++)
    步骤如下: 1、新建ATL项目 打开VisualStudio2022新建ATL项目2、添加接口类、实现接口方法.  添加一个新的ATL对象。右键MyComTest项目→添加→新建项→ATL→......
  • react-native获取屏幕尺寸
    react-native获取屏幕尺寸 项目中需要获取手机的尺寸import{Dimensions}from"react-native"varWINDOW=Dimensions.get("window");varwidth=WINDOW.width;......
  • [React Typescript] Discriminated unions in components props
    importReact,{useState}from"react";typeBase={id:string}|string;typeGenericSelectProps<TValue>={formatLabel:(value:TValue)=>string;......