React之函数式组件与类组件的区别

女爷i 2022-09-08 13:53 134阅读 0赞

最近被安排了一个以Umi（听过）为框架的项目（最后一次代码更新在一年前），起初内心是拒绝的，奈何领导拍着我的肩膀说：“小伙子，组织相信你，给你三天时间学习！！！”；听了领导的一席“真言”，我顿时内牛满面(╥╯^╰╥)，没办法只能硬着头皮上了…  
当拉下源码打开vscode那一刻，我的内心是崩溃的；文件全是以jsx结尾，文件内容全是自定义标签（首字母大写那种）…  
费了老大劲启动了项目，就是一个erp内部使用项目，页面基本都是表格，交互也都是增删改查之类的，完了之后就去看了Umi官方文档，结果发现要看懂React代码还是得学习一下文档…  
花了一上午时间看React文档结合本地源码，总算是有点眉目了，基本看得懂组件是怎么建立的、父子组件之间的参数是怎么传递的…  
***接着就到了上手的时候了：***  
函数式组件：

import React, {  useState } from 'react';
    export function Index(props) { 
    	console.log(props)//这个props就是父组件携带的参数
    	const [loading, setLoading] = useState(false);//状态管理
    	return (
    		<>//retrun中必须要有一个根节点，可以是标签或自定义标签或空标签，个人觉得空标签看起来逼格高
    		//html部分
    		</>	
    	)
    }

类组件：

import React from 'react';
    class Index extends React.Component { 
      constructor(props){ //构造器
        console.log(props.location.query.selectedRows)
        super();
      }
      state={ 
        loading: false
      }
      render() { 
      const {  loading } = this.state//解构赋值发，减少代码书写
    	return (
    		<div>
    		//html部分
    		</div>	
    	)
      }
     }
     export default Index;

总结：  
1.很明显可以看出二者的书写方式不同，效果相同。  
函数组件是一个纯函数，它接收一个props对象返回一个react元素。  
组件需要去继承React.Component并且创建render函数返回react元素，这将会要更多的代码。  
2.状态管理不同。  
函数组件是一个纯函数，你不能在组件中使用setState()，这也是为什么把函数组件称作为无状态组件。  
类组件中可以定义在state中定义变量，然后通过this.state.xxx去改变其状态，是不是和Vue中的data有点相似（本人一直以Vue为框架开发项目）。  
以上就是三天来略懂的知识点，有误的地方希望可以提出来，大神尽管指点。  
学了三天React最大的感受就是：“Vue的书写方式好Low啊”（仅代表个人观点，勿喷）。