最近被安排了一个以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啊”(仅代表个人观点,勿喷)。