React之函数式组件与类组件的区别 女爷i 2022-09-08 13:53 135阅读 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啊”(仅代表个人观点,勿喷)。
还没有评论,来说两句吧...