1.前言

最近因为业务需要开始学习Web前端-React框架的知识，之前一直做的是Android的研发，对于Web前端来说基本就是一个小白，所以借助互联网和资源对业务具体需要的React框架进行了学习，并在自己的项目中进行的实践，最后准备将自己的学习过程总结成一系列文章同大家分享，供同样刚入门的小伙伴一起学习交流~（虽然经过了整理，但不乏有错误与缺漏之处，可以在评论区留言指出或一起讨论）

另外此系列文章是针对Web前端和React的新手的，很多的概念都尽量用直白的描述和源码呈现（大佬轻喷~），但同时也不会出现太多进阶的内容，保证大家能够顺利过渡并对整个React体系和开发流程有一个认识。

2.系列文章组成

整个入门教程包括如下：

第一章认识React：从整体上认识React框架，包括它的历史背景，简介，优势，和其他框架的对比等方面内容

第二章 React的开发环境搭建：介绍如何搭建React的开发环境、工程目录的介绍以及运行一个Demo工程

第三章 React的组件化和JSX：分别介绍React中组件的概念以及JSX语法的介绍

第四章 React中的props和state概念：介绍React中props和state扮演的角色

第五章 React的响应式设计理念：介绍React中使用的响应式设计和编程思想，同时介绍事件绑定的过程

第六章 React的组件拆分和组件交互：介绍React中如何进行组件的拆分，以及父子组件中如何交互

第七章 React的生命周期：React的生命周期阶段以及应用方式

第八章 React入门总结和思考：最后理一遍通过这一系列笔记我们学到了什么以及一些思考~

本篇文章主要介绍第一章的部分，帮助大家从0开始认识React

3. React简介

直接引用官网的一句话：

A JavaScript library for building user interfaces

意思是一种用于构建用户界面的Javascript（JS）库。

第一：React本身就是一个JS的第三方库，从宏观角度看其实和其他JS库没什么区别，你完全可以通过script标签来引入React库的JS文件来使用它（肯定不推荐…）。

第二：用于构建用户界面，意思就是这个库的目的主要负责处理用户界面-帮助渲染HTML视图的。

3.1 背景

React来源自Facebook公司，由工程师Jordan Walke开发（叫Jordan都蛮牛的~），起初React被叫做“FaxJS”，它的设计思想受到了一种PHP的HTML组件库-XHP的影响。此外也因为目前市场上所有 JavaScript MVC 框架似乎都令其不满意，就决定内部自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

之后由于React框架的设计思想很棒，代码逻辑简单，上手也很快，同时也是开源项目，关注的人也越来越多。一开始真的只是一个界面库，现在借助围绕React或者说赋能React的其他JS库，已经成为了一整套十分优秀的Web应用的解决方案。

之后基于React还衍生出了React Native（RN），计划使用Web的开发模式来一统移动端Native应用的开发。—学好了还能去搞移动端（我的本行），是不是很兴奋啊~

3.2 特性

组件化的开发思想：创建各种状态各异的组件，由组件来组成复杂的UI，而不是一个HTML囊括所有界面描述。
内置JSX语法：使用独特JSX语法（后面会说）来创建组件，使用函数式编程思想来进行UI更新（函数式编程思想是一种风格，感兴趣的可以自行了解一下）
视图的高效更新：基于内部虚拟DOM和Diff算法来有选择性的进行视图更新
单向数据流动：子组件本身不会改变他接受到的数据，只会去监听数据变化，只会使用传递过来的新值进行重新渲染而已

3.3 优势

支持团队可靠，更新稳定，处理Issue及时（选择第三方框架很重要的一点）
技术成熟，相关第三方库齐全，生态完整
上手简单，性能也比较好
组件化开发，符合Web开发趋势
学完还能学RN，进行移动端的App开发，还可以使用 Node 进行服务器渲染
很多大公司的主要网站都是使用React作为基本框架，例如Netflix和Airbnb，不用担心对大型项目的支持能力

4. 和其他第三方框架的对比

这部分按道理应该介绍完React再回过来看，但是为了在一开始就给大家一个整体的印象也方便部分同学进行框架选型，这里我就放在第一章进行了。

4.1 React vs JQuery

虽然我是这段时间才接触的Web前端开发，但是我也很清楚JQuery在Web前端开发者中的地位，但是从目前来看使用React真的应该暂时放弃JQuery了，尤其因为React操作的是虚拟DOM，而JQuery仍然是传统操作网页DOM，所以必须做一个取舍。。。希望大家不要自己给自己丢坑了~

不过JQuery中很多DOM的操作和控制逻辑还是值得我们深入源码去学习的，能了解和巩固很多Web开发的基本功。JQuery很棒，只是时代是会向前的。

4.2 React vs Angular

Angular也是目前Web流行的三大框架之一，他和React的不同点主要在下面：

库和框架：还记得React的介绍，React本身其实应该称为一个library而非framework，而Angular是货真价实的framework。React作为一套解决方案你需要灵活的搭配其他库一起使用例如Redux，而Angular自身提供了构建一个大型项目所需要的一切——灵活 VS 健全

Facebook和Google：爸爸们的比拼，一个Facebook负责运营和完善，一个Google负责，都基于MIT证书开源——大佬 VS 大佬

语言的不同：React基于JSX进行组件和页面开发，JSX将页面描述和功能逻辑进行结合，JS文件里面也可以写标签语言。Angular同样有者自己的模板语法，也需要去学习。别想着只用JS的语法就能搞定所有（不过其实上手不难）。另外Angular强制使用Typescript，而React不是（不过仍然推荐）——各具特色都需学习

数据绑定：React是单向数据绑定，如果你改变了数据模型的内容，UI会跟着变，但反过来可不行。Angular则是双向绑定，数据流向和代码工作量其实简化了，但是处理不当可能导致数据模型处于未知状态（遵守一些开发准则其实可以避免）——单向 VS 双向

综合上面几点还有网上一些资料我个人的建议是：

如果你的项目并不是一个后台管理系统，主要面对用户侧，经常变化，不想被框架绑定的太死，没有Google信仰，那么你可以选择React。
如果你考虑学习之后的就业能力，你可以选择React
如果你之后还希望涉及移动端开发，你可以选择React
如果你希望一套稳定且长期运行的框架和产品，你可以选择Angular
如果你是大佬，都可以~

4.3 React vs Vue

Vue是由Google 前工程师尤雨溪于 2014 年创建的。但是它没有得到著名的顶级组织的支持。截至撰稿时的最新版本是 2.6.10，于 2019 年 3 月 20 日发布。它是 javascript 家族中最年轻的成员，仅仅推出五年。阿里巴巴和 Gitlab 正从该框架中受益。 Vue 被认为是一些成功的 javascript 技术功能的结合。

Angular我之前多少用过，Vue真的是一点没有，所以还没有什么实际的体验，所以这里直接贴出一篇文章，大家感兴趣可以自己看一下：

React VS Vue