拥抱React


一个学习2年前端,从刀耕火种的html+css+js到vue再到现在的react心理变化过程。以及初学react遇到的一些小问题

拥抱React

作者: Pawn

时间: 2018.11.13

本文首发: Pawn博客

github: https://github.com/LiChangyi

描述: 一个学习2年前端,从刀耕火种的html+css+js到vue再到现在的react心理变化过程。以及初学react遇到的一些小问题

我为什么学习react

从大一开始学习前端已经2年多了,从一开始学习前端就十分的不喜欢用别人的库,所以当他们用着jQuery和bootstrap的时候我还在用着css慢慢布局和原生JS去操作DOM来实现效果,虽然感觉写代码的速度十分的慢,但是内心是十分开心的,因为我只用了w3c提供的标准api。这样能让我学到更多的知识。所以我的内心是更喜欢用基础的东西,最享受所有的代码都是我一个人写的。

大二下了,不准备考研,必须要为大三出去工作做考虑,所以学习一门现在流行的框架似乎是必须的(因为拉钩网上前端的招聘vue/react/ng 已经顶替了jq的地位,成了前端必会的一个技术)。所以,在3月份开始接触了vuejs,这里为什么选择vuejs呐,因为网上关于学习vue的教程是真的多,论坛上面很多人都再说vue很简单,其次最重要的是vue的作者尤大是中国人,每个人都有一个爱国情怀,所以vue成了我的首选。首先不得不说vue真的很简单,我学vue跟着官网看,然后试着完成了一个ToDo突然发现我写代码的速度较以前大大的提高。这里不得不给vue的官网点个赞,教程是我看过最好的中文教程(因为英语不好的缘故,每次学习新东西看的都是中文官网,但是有些中文翻译真的太烂了,反正我是不能理解)
​ 每天看看vue官网看着api,然后在github上面搜索别人写完的优秀vue项目,慢慢的充实着自己,提高自己的技术。似乎事情一切都在向好的方向发展。
随着在今年暑假,我用vue搭建了一个给大一同学的选课系统当时用了vue+koa+MongoDB 虽然做的是一个很简单的东西,但是还是发现了vue的一些不足。比如数组或者对象的深层嵌套数据不能响应,已经虽然模板指令给我们开发提供了便利,但是在面对复杂的情况(可能是一个简单项目被我搞复杂了)v–指令不好用,然后不得不自己用原生JS来实现自定义指令,但是发现自定义指令不能与vue中的data通信,当时心里真是一万匹草泥马跑过(虽然vue也支持写jsx语法但是没有去试过,希望后面再去试试)。虽然有一些不足,但是毕竟也学了大半年了,还是忍了忍把代码撸出来了。
在暑假的最后一个月,因为前面一直有想搭建一个个人博客的想法所以用继续用vue+koa+MongoDB搭建了个人的博客,又算是再次熟悉vue和koa的语法吧。一切都还很顺利的,因为前面写过的项目里面有很多代码可以复用,ctrl+c ctrl+v 的开发模式,虽然开发很快,但是我心中是十分不爽的,虽然及其的想要去改变,但是又想偷懒这是十分矛盾的。

​ 大三开学了,因为这2年一直没有参加什么比赛或者一些老师项目,所以如果后面填写简历,项目经验哪里会让我十分的难堪,所以计划在这一学期争取在做2个完整的东西,不然大三出去实习会很难受。所以就开始选择做什么,所幸学校开了python课,老师要求最后课程设计需要一个python的东西,我初步的打算是用vue做前台,然后加上python的flask框架和以前学过一点点的mysql来做一个上课管理的项目,主要包括课堂的点名和老师作业的布置一个webApp。当我正常的打开命令行输入vue create demo npm run serve code . 看api,记住指令,发现我已经养成了定势的是思维,活成了最讨厌的自己。我发现我写的不是代码,我已经不是一个程序员,我活成了一个码农,只会代码的粘贴复制。

​ 然后我有不禁的问自己,自己真的喜欢这模式吗,喜欢这种ctrl+c ctrl+v 的开发模式吗?答案是否定的,虽然这种开发的确很快,但是机械式的撸吗,重复的代码慢慢的我会感到无趣。所以我觉得先把项目放一放,看看别的东西,我专注看了看一个简单mvvm的实现方式,看了一些webpack基础,然后还是是迷茫,前端呀,到底应该学什么?总感觉上了这条贼船,然后下不去,也上不了岸。我后来决定,去看看react,因为网上关于vuereact的比较还是特别的多,我想去看看react为什么值得别人这么的肯定(因为我认为vue已经做得非常好了),其次就是我相对我的博客进行一个重构,因为以前是才用单页应用,SEO有很大的问题,我想解决他,虽然vue页游NUXT也有vue-server-renderer,但是我就是想用react,也有可能是日后想尝试一下react native

初识React

​ 我个人学习一个新的东西的习惯是,先看视频。因为我认为你刚开始学一个东西,什么都不知道,也不知道文件如何建,代码如何写。所以在B站上面看了某课的盗版react 实现一个简书(等我有钱了一定支持正版),看看前面几章基本上了解了react的基本语法,然后我打开了react的官网(当然这里肯定指的是中文官网,因为前面提过英语很差没办法)。然后发现react的中文官网和vue的官网真的相差很远。发现看了还是有一些东西不是很清楚,写的不清不白的,然后不得不去github看他提供的demo源码。然后不断的学习,不断的写项目,不断的在掘金上看看大佬们分享的react的文章。因为个人觉得原生js能力和es6的语法还行加上以前学习过vue,有一定的组件化思维所以学习起来还是比较快的。

​ 用vue和react的第一个项目肯定是Todo就和学习编程语言一样,第一个小程序肯定是hello world。所以也是准备用react做一个Todo,不做不知道,一做发现问题真的很多,我罗列一些如果你是vue转到react最不容易接受的几个东西:

  1. 第一个是input输入框数据的绑定,在vue里面我们直接使用v-model就可以实现,但是在react里面没有指令的概念,我们可以写成value={变量} 这里的变量必须在class的constructor里面声明,所以这里的变量名字写的很长this.state.xxx和vue里面只写xxx感觉页面很乱。

  2. 本以为我把数据给input输入框绑定了数据便没事了,然后打开了页面,发现输入数据,input输入框不能更新,WTF,打开控制台,为什么控制台会报错?说什么我没有绑定onChange事件。我记到以前我写vue的时候好像没这一步呀,算了用别人的东西还是向别人妥协把,说我没有onChange事件,我就加一个onChange事件吧。然后按照网上给的教程,绑定了一下。在打开发现报this的错误,这又是什么回事呀,感觉要崩溃,甚至都想删除文件然后专心学习我的vue去了。但是还是最后想了想,忍了一忍,学前端的人,一定要忍。然后又去绑定this指针,这里很简单,用js里面的bind函数就能实现,如果你js能力不行,肯定也很懵逼bind是做什么的,当然也可以用箭头函数。比起用bind来绑定this,我更喜欢用箭头函数

    // vue
    <input v-model=value>
    // react
    <input value={ this.state.value } onChange={ (e) => this.handleChange(e) }/>
    // 感觉vue简单的不是一点两点,而三点四点
  3. 当然react没有指令的关系,所以没有什么像v-forr-for的指令。所以对一个数组的渲染,我们需要用js里面的循环,这里基本上都是采用的是数组的map函数

    一波三折过后,终于完成了一个简陋的TODO,,好累好累,感觉像是完全再写原生js似得。可能我是被vue惯坏的孩子。

最后

​ 到今天,学习react已经2个星期了,基本上习惯了react的编码方式,慢慢的从开始的很不喜欢的变成了喜欢,至于为什么,我也不清楚。可能是我更喜欢这种不用指令的东西,感觉所以的东西都是自己写的。目前也基本上完成了用react对我的博客进行的重构,目前正在看redux来进行状态管理。以及用axios来打通前后端的交互。

​ 这里个人虽然学了2个星期,但是总结一下,vue更适合于快速搭建前端界面,特别时候那些后台人员兼职前端,因为学习成本很低,对前端的基础知识要求不高。react的话更适合我们这类一直学习前端的人,因为可以在写react的时候,保存我们以前的前端基础知识。不管怎么说,vue和react这对兄弟,都应该值得我们去了解,然后熟悉其中的一门吧。

​ 这里个人觉得学习react最大的忠告: 遇到问题第一时间用谷歌搜素,我也不知道为什么,百度搜素不出来的东西谷歌一下就出来了。就和学vue的时候一样谷歌搜素不出来,但是百度一下就出来。这可能是和使用的人数有关把!

声明: 本篇博文没有任何的贬低一个提高另一个。此文作为我学习过程的记录,记录为什么我要学了vue以后再去尝试学习react为什么会慢慢的喜欢上它。以及记录一下初学路上的一些小问题。可能存在有些语句言论过激,请谅解。有什么好的建议,请在下面写出来哦!谢谢!

目录

  • 拥抱React
  • 我为什么学习react
  • 初识React
  • 最后

留下点什么吧 . . .

原图加载失败!