序:为什么要选React
前言
大家好,我是一名前端开发者,同时也是一位前端技术爱好者,可以说我是特别喜欢前端开发这个工作,这也是我从业这么多年的动力。废话不多说,我们这套专栏主要是对React框架从基础入门到实战开发,做一个由浅入深的讲解。希望通过我的分享,可以让大家有所收获。
互联网发展到今天,前端成为了互联网开发技术中比较重要的独立分支。在早期的互联网项目开发中,主要是由后端起着主导作用,前端的操作仅仅局限于DOM区域。随着基础设施的不断完善和代码封装层级的不断提高,前端能够完成的事情越来越多,前端需要解决的业务场景也越来越复杂。这就迫使前端开发者们,要不断的提出新的解决方案。
近几年,前端已经发展到了跨端、跨界面的革命性阶段。目前主流以基于MVVM、Virtual DOM、前后端同构技术进行开发的项目居多,实现的方向也多种多样。React框架就是在此基础上发展起来的,其独特的设计思想所带来的创新也是很具有代表性的。
React从2013年开源以来,目前已经是前端领域在全球范围内最火的框架了。国内的一二线互联网公司都在广泛的使用React技术栈,比如阿里巴巴、百度、网易、美团、知乎、去哪网等等。React的全球社区也非常的强大,你可以看到围绕React产生的很多新技术,例如:React Native、React VR等。同时,Facebook技术团队对React的支持也是非常给力的,目前React已经更新到16的版本,这个版本被称为React Fiber。该版本的React框架在性能和便捷度上都得到了大幅提升。
在React的使用中,我们能够看到全球范围内的开发者解决同一个问题的不同方案,所以,学习React可以让我们快速的了解前端技术在全球范围内的发展情况。
React也是一款很神奇的框架,你可以在几个小时内上手React的基础开发,但即使你在工作中使用了一年以上的React,也很难说你真正能够驾驭这门技术。我在使用React过程中,也遇到了很多坑,通过这套教程,我希望能够把我的经验分享给大家,让大家能够快速上手React技术开发。
本套React教程是以实战为主旨,从零基础的环境搭建开始,通过React开发中所涉及到的基础知识,全面、深入、透彻地讲解React开发的技术栈,使用通俗易懂的简洁话术让读者更加轻松的学习。这套教程不仅仅是让大家入门React开发,更要让大家成为一名优秀的React开发工程师。
聊聊前端组件化思想
对于很多前端技术的初学者来说,学习过程中关注的点可能就是技术的实现过程以及API文档的枯燥记忆,很多初学者往往都会忽略先去了解前端技术的发展。如果没有了解过前端技术的发展史,学习前端技术就会显得很迷茫。
大家现在都有一种体会,那就是前端技术的发展太快了,每过个一年半载的就会有新的框架出现,经常会看到论坛里有小伙伴在感叹“哎呀,真学不动了……”。这就是大家所说的前端摩尔定律:“每过18个月,前端的学习难度就会增加一倍”。
其实,我是不太赞同这种说法的,前端技术不断发展,框架不断更新,开发只会变成更简单。简单到你只需要使用一个脚手架工具就可以搭建很复杂的开发环境,并且集成了所有的全家桶,涵盖了从单元测试到项目部署发布的所有环节,在开发时使用的UI库,不用自己动手写一行CSS代码就能实现复杂的网页布局和效果。
但是类似这样的框架和库层出不穷,你还没来得及到官网看一眼文档,就已经有了新的替代品,就更不用提静下心来认真学习其原理了。当我们跟不上技术发展的脚步而把自己强行变成搬砖工具时,自然就会显得身心疲惫。
所以,越是在琳琅满目的环境中成长,越要懂得沉淀的价值,前端的发展可谓是“一眼万年”,一眨眼的功夫,一个时代就过去了。但是无论框架发展到了哪种地步,服务用户的宗旨是不变的,从静态页面到动态网页,从简单网页到Web应用,整个发展的过程都离不开思想的进步。谈到思想,我们就不得不说前端的组件化思想了,组件化思想是伴随着前端发展的一个不可或缺的设计思想,目前比较流行的前端框架也都很好的实现了组件化,比如React、Vue、Angular。我们本套教程主要是讲解React组件化开发。
什么是组件化
组件化是一个比较抽象的概念,对于一直从事前端开发的工程师来说,早期是不太容易接受的,组件化的概念也并不是发源于前端。在一些其他语言或者是桌面程序语言,早已有了组件化开发的先例。
通俗的讲,组件就是把一段展示UI样式的代码和其对应的功能作为独立的整体来看待,无论这段代码放到什么地方使用,都可以显示一样的效果和实现相同的功能,从而实现代码复用,这种整体化的设计思想就是组件化。更确切的讲,只要有UI层的展示,就必定有可以组件化的地方。由此不难看出,组件化就是增加UI层的复用性、灵活性、提高开发效率。
组件化的演变
在很久以前,如果有使用过Dreamweaver的话,肯定有这种体会,我们要设计网页,先用DW拉出一个table,然后选中一个区域,再插入需要的“组件”,不断重复这个过程,一个网页就这么快速的被设计出来了。还有一种操作,就是把一张很大的图片添加到页面中作为背景,然后用area标签,把需要使用链接的地方划出来,直到现在,很多做淘宝店铺装修的美工还在使用这种方法。
在那个时期,做网页的分成两拨人,分别是“美工“和“程序员”。我在这里称呼“美工”并没有任何的贬义,而是在当时大家都没有意识到这个岗位的重要性。使用table布局制作的网页,层级非常深,维护的难度也是非常地大,用程序员业内的一句话讲,“去改你的代码,还不如重写一遍来得快!”。当更多的程序员意识到这一点后,就开始改进使用div+css的方式设计网页。
前端在那时还是十分过程式的开发,例如操作DOM,发起ajax请求,刷新数据,页面局部更新。这样的流程要不断的重复实现,有时程序员们也会使用类似于jQuery UI这类的前端库完成页面开发,以此来减少代码的工作量。使用这种UI库应该算是模块化开发。
从程序员开始承担前端开发的工作以后,就MVC的概念套用在前端开发中,前端开始学习后端的开发思想,具体流程是:
用户通过视图(View)产生数据,并发送给模块(Model),模块对数据处理后发送到控制器(Controller),最后由控制器对数据库进行数据访问。
这就使前端开发也有了业务逻辑,把UI和功能进行了分离,可以按照不同的文件划分层级,结构清晰明了,突然感觉这种方式做前端开发也是一件很爽的事情。
于是在这个基础上,就有了更加丰富的MVVM框架,并且将前端UI赋予了真实的意义:用户看到的所有UI都有其对应的ViewModel。简单来说,就是你看到的所有数据都是从数据库里访问到的真实数据,并且实现数据双向绑定,只要UI发生改变,对应的数据也会改变,反之亦然。
但是大部分的MVVM框架并没有实现组件化,因为MVVM最大的问题是:
1.执行效率低,只要数据改变,用于检测数据改变的UI也要改变,如果操作频繁,可能需要调用成千上万次,执行效率会大大降低;
2.UI层级比较深,无法严格控制ViewModel的作用域,UI不支持多次绑定,给组件化带来了困难;
鉴于这些问题,一些新的前端框架经过一番“取其精华”的优化后,更加完美的实现了组件化开发的方式,比如React和Vue,就是很好的框架。
React组件化的优势
从框架本身来说,React和Vue是完全不同的两个框架。React提倡的是Web Components,它的每个部分都是一个组件,可以使用props属性为组件传入数据。React是单向数据流管理的先驱,使用React+Redux是将MVC做到了极致。而Vue是后起之秀,既吸取了React的数据流管理方式的设计理念,也实现了MVVM的双向数据绑定和数据监控,也算是比较灵活的前端框架了。
React在DOM渲染上速度是很快的,这要归功于其独特的特征——虚拟DOM。顾名思义,虚拟DOM不是真实的DOM解析,也不需要浏览器的DOM API的支持,它是在模拟DOM的基础上建立起来的一个抽象层,虚拟DOM的本质就是一个JS对象。当数据和状态发生了变化,会被自动同步到虚拟DOM中,最后再将发生变化的部分同步到DOM中。
React在端领域的表现也是很优秀的,React Native就是使用JavaScript和React编写的原生移动应用,在设计思想上和React保持一致,通过声明式的组件机制来搭建丰富多彩的用户界面。React Native并不是我们常说的“网页应用”、“HTML5应用”、“混合应用”,它是真正的移动应用,在用户体验上与C和Java编写的原生应用几乎没有差别。
专栏介绍
内容概要
本专栏是React框架从基础入门到项目实战的教程,用通俗易懂的案例讲解React基础知识,然后借助基础知识实现React实战项目,这样大家就可以有效的把基础知识和项目中的应用场景相结合。对于晦涩难懂的知识点,教程中会通过图文的形式讲解,帮助大家理解。
学习本套React教程需要有一些JavaScript的基础,比如能够快速理解this指向的问题。然后是要了解ES6的语法规则,React中的很多代码都是使用ES6语法实现的,如果没有了解过ES6的同学也不用担心,我在第2章中准备了ES6的教程,让大家在项目开发中快速上手ES6语法。
除了ES6之外,还需要对webpack和npm有所了解,如果你没有学过相关的知识点也没有关系,在第3章前端工程化的教程中,会对webpack和npm的使用做详细的说明。
教程大纲
整套教程我分为三个部分对React框架进行讲解:
第一部分是基础实例,从最基础的create-react-app脚手架搭建环境开始,然后通过案例学习JSX语法和React基础知识,开发案例中导入开发调试工具的使用。在这部分会对React底层原理做深入的讲解,例如虚拟DOM和diff算法的内容,更不用说生命周期、组件通信这些基础知识了。在该部分的后面,会对Redux数据框架的用法以及redux-thunk、redux-saga这些最新技术做深入的讲解。
第二部分是React框架的进阶学习,主要是对SSR服务端渲染,React测试工具的使用,React组件性能优化,Hooks的原理与使用等知识点进行详细的讲解,帮助大家更全面的理解React框架在项目开发中的应用。
第三部分是React实战学习,会引入项目开发中非常有用的模块,比如使用React-transition-group帮助我们实现组件中各种各样复杂的动画特效。在做样式布局时,我们还会采用最新的styled-components技术实现CSS样式编码,避免组件之间的样式影响。在进行Redux数据管理的时候,还会使用React推出的Immutable.js数据框架,这个库可以避免在项目开发中对数据的误操作。
在React实战部分,还会讲到很多实用的技术,比如使用axios发送ajax请求获取数据等等,并且能够熟练掌握很多React项目实战技术。
学习收获
当大家学完本套React教程之后,可以快速上手React框架的使用。虽然学习React框架的门槛并不高,但是要想完全掌握React知识点还是有一定的难度的,如果大家学习完了这套教程,我相信你一定会有非常大的收获。
在教程中可以了解到非常新的React工具全家桶,上手大型的React项目开发不是问题,同时可以写出符合规范的React代码。对于初级水平的同学,你可以入手React项目开发;对于中级水平的同学,你可以了解很多React的底层原理;而对于高级水平的同学,你可以学到React相关的很多前沿技术。
如果这套教程中的所有知识点,大家都能做到灵活应用,那么冲击20K以上的前端工程师是没有任何问题的。大家是不是对这套教程满怀期待啊,让我们一起进入React的学习之中吧!
序:为什么要选React相关推荐
- React 教程:快速上手指南
翻译:疯狂的技术宅 原文:https://www.toptal.com/react/... 本文首发微信公众号:jingchengyideng 欢迎关注,每天都给你推送新鲜的前端技术文章 前端和 Ja ...
- Innumerable Ancestors 尺取 dfs序 lca
给一棵树,m次查询,每次查询给两个集合,从这两个集合中分别选一个结点,使得这两个结点的lca的深度最大 考虑dfs序为3, 4, 5的三个结点,3和4的lca深度一定大于等于3和5的lca深度 所以可 ...
- vue:无法将“vue”识别为脚本_「前端架构」React和Vue -CTO的选择正确框架的指南...
快速总结:为项目选择正确的javascript框架或库是CTO和项目经理的基本任务.然而,选择的范围很大程度上取决于几个因素,如项目时间.学习曲线.框架性能和团队规模.这篇文章旨在指导他们选择正确的j ...
- mysql 逆序排序_将一组乱序的字符进行排序进行升序和逆序输出
[填空题]交流电的 值等于与其 相同的直流电的数值. [简答题]课本p78实训4,上传语句和运行结果.请直接贴文本或截图,不要用附件的形式提交. [单选题]对称三相电源接星型对称负载,若线电压有效值为 ...
- 有了vue为什么还学react?
有了vue为什么还学react?因为react可弥补vue的不足.下面本篇文章就来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. vue的优缺点 vue是Evan Y ...
- 新手学vue还是react?
新手学vue还是react?下面本篇文章给大家分析一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 出身背景: react是facebook团队开发,2013.3月发布.目前版本 ...
- 小白vue_web前端开发:新手学习前端应该先学vue还是react?
新手学vue还是react?下面本篇文章给大家分析一下.有一定的参考价值,正在学习或者有需要的朋友可以参考一下,希望对大家有所帮助. 出身背景: react是facebook团队开发,2013.3月发 ...
- 从零开始搭建React开发项目之抖音“剪映”——创作课堂(基础入门篇)
前言 React是近几年来前端项目开发非常火的一个框架,其背景是Facebook团队的技术支持,市场占有率也很高,对于很多新手来说可能很多人都在犹豫是选react还是vue,如果时间充裕的话还是首选r ...
- 如何从零学习 React 技术栈
为什么要学习 React? 首先,React 相较于其他框架,其生态圈发展最为完整成熟,有非常多现成的.完整的解决方案. 其次,它适用于大中型应用的开发,便于团队中多人之间协作,很多大厂都在正式的项目 ...
最新文章
- 给力的 Google HTML5 训练营(HTML5 DragDrop 拖拽、FileRea...
- 在GitHub上管理项目
- Hibernate的配置文件 Hibernate.cfg.xml与xxx.hbm.xml
- 基础网络和关键基础设施
- JRE里居然隐藏了一个自带的js engine
- 云网络十年:探路者阿里云的理想和坚持
- bzoj 2631: tree
- 微服务的真相(一)服务拆的太小,后面迭代忍不了
- 收集 一些Oracle账号
- 30款免费3D建模软件,总有一款适合你!
- 荐书 | 22本颠覆我们认知的思维方式(上)
- 用指针写藏头诗c语言,智能藏头诗小程序:小程序可以自动写诗啦!为“Ta”写首诗表白~...
- Android Q 开机启动流程
- TreeGrid(树形表格)
- tableau连接不上oracle,Oracle
- 多边形裁剪(Polygon Clipping) 1
- 托尔斯泰《战争与和平》主要人物
- SHA 和 RSA 的区别
- 99%的人都不懂中本聪、V神这么牛靠的是什么?一张图而已!
- STM32--矩阵键盘的设计实现