从零学习 React 技术栈系列教程
Hello大家好,我是余博伦,在接下来的一段时间里,由我和大家从零开始共同学习React技术栈的相关知识。教程将会以连载的形式发布在我的个人博客和微信公众号上,以文字教程为主,辅以一些代码示例供同学们参考,在连载结束之后,我会将所有内容整理为电子书提供下载。连载时教程会在每日早晨由公众号推送,同时为了方便一些外链和代码示例,可以在本博客查看教程。
Hello大家好,我是余博伦,在接下来的一段时间里,由我和大家从零开始共同学习React技术栈的相关知识。教程将会以连载的形式发布在我的个人博客和微信公众号上,以文字教程为主,辅以一些代码示例供同学们参考,在连载结束之后,我会将所有内容整理为电子书提供下载。连载时教程会在每日早晨由公众号推送,同时为了方便一些外链和代码示例,可以在本博客查看教程。
React.js 是一个帮助你构建页面 UI 的库。如果你熟悉 MVC 概念的话,那么 React 的组件就相当于 MVC 里面的 View。如果你不熟悉也没关系,你可以简单地理解为,React.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。一个组件的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的,这时候组件的显示形态就会发生相应的改变。而 React.js 也提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。React.js 不是一个框架,它只是一个库。它只提供 UI (view)层面的解决方案。在实际的项目当中,它并不能解决我们所有的问题,需要结合其它的库,例如 Redux、React-router 等来协助提供完整的解决方法。
看看上一节我们的代码,仔细留意一下 changeLikeText
函数,这个函数包含了 DOM 操作,现在看起来比较简单,那是因为现在只有 isLiked
一个状态。由于数据状态改变会导致需要我们去更新页面的内容,所以假想一下,如果你的组件依赖了很多状态,那么你的组件基本全部都是 DOM 操作。一个组件的显示形态由多个状态决定的情况非常常见。代码中混杂着对 DOM 的操作其实是一种不好的实践,手动管理数据和 DOM 之间的关系会导致代码可维护性变差、容易出错。所以我们的例子这里还有优化的空间:如何尽量减少这种手动 DOM 操作?
几年前,我的一个朋友向我吹捧有个叫做React的框架会如何革新Web开发。其实一开始我觉得它只是又一个昙花一现的框架罢了。可在之后的时间里,React名声鹊起,逐渐变得不容小觑了。也许你和我之前的状况差不多:总是听到React这儿好那儿爽,可是真正坐下来学习React的时候又毫无头绪。好消息是我在这里替你总结了,其实React只有“五大核心概念”。不过也请不要误会我的意思,并不是说我一篇文章就能能让你摇身一变成为精通React的大神,但如果你打算或者正在学习React的话,我至少能帮你理清思路。
第一节课呢,我们就来简单介绍一下应用在 React 开发当中,属于 ES6 的新的关键字和语法糖,也好为我们之后的学习打下一个基础,当然我更推荐同学们对 ES6 有一个比较全面的了解之后再开始学习 React,不过你也不需要担心,以后在课程中每当遇到涉及 ES6 新语法的问题时,我都会稍作讲解介绍。这是本教程的第一课,主要内容是 ES6 相关的前置知识介绍,如果你有发现不懂的术语,不需要担心,因为在接下来的教程当中,所有我们提到的术语全部都会涵盖讲解。
React 是我做前端以来接触到的第三个框架(前两个分别是 Angular 和 Vue),无论是从开发体验上和效率上,这都是一门非常优秀的框架,非常值得学习。借助于 Redux,我们可以轻松的对 React 中的状态进行管理和维护,同时,React 也为我们提供了组件内的状态管理的方案,也就是 setState()
。本文不会涉及到 Redux,我们将从 Component
的角度来说明你不知道的以及更合理的 setState()
。
我相信很多朋友跟我一样,初次听到什么Flux, Redux, Vuex,状态管理的时候是一脸懵逼的。因为在外面之前前端大部分开发的时候,根本没有那么多的概念。自从ReactJS火爆后,什么Flux, Redux,React全家桶是一套一套接踵而来。搞的很多开发者甚是头大。所谓的ReactJS全家桶即ReactJS + Redux + Webpack,当然其中的Redux可以用其他例如Mobx之类的替换。原本可能只是很简单的一些数据展示需求,当想用尝试使用ReactJS时,去Google搜索了一些教程,突然发现怎么用个React需要这么多东西。正如今年比较有名的一篇文章里面描述的那样 — ”在2016年学习前端是怎样一种体验"。
近两年前端技术的发展如火如荼,大量的前端项目都在使用或转向 Vue 和 React 的阵营,由前端渲染页面的单页应用占比也越来越高,这就代表前端工作的复杂度也在直线上升,前端页面上展示的信息越来越多也越来越复杂。我们知道,任何状态都需要进行管理,那么今天我们来聊聊前端状态管理。
使用 React + Redux 这个技术栈开发应用已经有很长一段时间了,我的一些使用经验也许会有些主观,但我觉得写出来也许对你开始学习或是进阶使用 React + Redux 会有些帮助。Redux 并不是只和 React 结合使用的,它也可以和其他的很多类库结合起来一起使用,即使你还未开始深入使用,你也可以阅读文中的部分内容。同时,如果你有一些建议或是疑惑,可以在 Github 给我提交 Issue,很乐意与你一起交流。
React.js 单独使用基本上是不可能的事情。不要指望着类似于 jQuery 下载放到 <head />
标签就开始使用。使用 React.js 不管在开发阶段生产阶段都需要一堆工具和库辅助,编译阶段你需要借助 Babel;需要 Redux 等第三方的状态管理工具来组织代码;如果你要写单页面应用那么你需要 React-router。这就是所谓的“React.js全家桶”。