登录
原创

2020年,我是如何从一名Vueer转岗到React阵营

发布于 2020-10-15 阅读 170
  • 前端
原创

# 前言
大家好呀!作为一名习惯于Vue的前端,国庆后正式走入了去往React阵营的道路。经历了金九银十和十一长假后的我也要开始努力写文章了,开篇主要是分享下我是如何横切到React技术栈。如果看文章的你正在学习React或者说也是转换技术栈希望我的文章能给你带来一点启发和帮助。
为什么换React
为什么换React呢,是因为新公司是属于React技术栈。包括antD,Umi,hooks等一系列的解决方案。在技术栈方向上进行了更换,因此,在这个9月,我成为了一名Reacter。虽然之前接触过react,但是技术的更新迭代是日新月异的,因此决定从基础出发,重新再刷一遍。
# React现在的前置技能TypeScript

  1. TypeScript 中的类型注释和类型推断
    在Vue中自由飞翔惯了的我,一进入react的世界有点懵。到处是各种类型注释,不然就报错页面一片红色,下面我们简单了解一下·····
let count: number;
count = 555;

这段代码就是类型注解,意思是显示的告诉代码,我们的count 变量就是一个数字类型,这就叫做类型注解。是不是一下就明白了。
再感受下

let count = 123;

这时候我并没有直白的告诉你变量count是一个数字类型,但是如果你把鼠标放到变量上时,你会发现 TypeScript 自动把变量注释为了number类型,也就是说它是有某种推断能力的,通过你的代码 TS 会自动的去尝试分析变量的类型。
2. TypeScript 函数参数和返回类型定义
经过上面的类型注释和类型推断,就能明白函数参数和返回类型定义的意义了,首先我们从一个函数来直观的看一下

function getTotal(one: number, two: number) {
  return one + two;
}

const total = getTotal(1, 2);

这时候我们写的代码并没有定义getTotal的返回值类型,虽然TypeScript可以自己推断出返回值是number类型。 但是如果这时候我们的代码写错了,比如写程了下面这个样子。

function getTotal(one: number, two: number) {
  return one + two + "";
}

const total = getTotal(1, 2);

这时候total的值就不是number类型了,但是不会报错。这个时候有的朋友就会想到去定义total,但是如果代码是上面的样子是很难找到错误的,因为是函数getTotal()出了错误。这时还是要从根本解决问题

  return one + two;
}

const total = getTotal(1, 2);

自由飞翔的日子不在了,但是发现了一点好处,就是代码一旦出现错误,原因也是相对好找了许多。最多的基础视频和学习还是来自技术胖的教程。时间无多,去努力学习了,后面会一步一个脚印的记录自己学习的情况!

评论区

励志做一条安静的咸鱼,从此走上人生巅峰。

2

0

3