React系列(一)：邂逅React开发

邂逅React开发

React是什么？

■React是什么呢？相信每个做开发的人对它都或多或少有一些印象。口这里我们来看一下官方对它的解释：用于构建用户界面的JavaScript库。

[图片上传失败...(image-e9d12f-1591685307218)]

■我们知道对于前端来说，主要的任务就是构建用于界面，而构建用于界面离不开三个技术：口HTML：构建页面的结构口CSS：构建页面的样式口JavaScript：页面动态内容和交互 ■那么使用最原生的HTML、CSS、JavaScript可以构建完整的用户界面吗？当然可以，但是会存在很多问题口比如操作DOM兼容性的问题；口比如过多兼容性代码的冗余问题；口比如代码组织和规范的问题：

常见的JavaScript库

所以，一直以来前端开发人员都在需求可以让自己开发更方便的JavaScript库：口在过去的很长时间内，jQuery是被使用最多的JavaScript库；口在过去的一份调查中显示，全球前10，000个访问最高的网站中，有65%使用了jQuery，是当时最受欢迎的JavaScript库；口但是越来越多的公司开始慢慢不再使用jQuery，包括程序员使用最多的GitHub；

■现在前端领域最为流行的是三大框架：口Vue 口React 口Angular

[图片上传失败...(image-41469c-1591685307218)]

■而Angular在国内并不是特别受欢迎，尤其是Angular目前的版本对TypeScript还有要求的情况下。口Vue和React是国内最为流行的两个框架，而他们都是帮助我们来构建用户界面的JavaScript库。口关于它们的对比，我会另外再写一篇文章

React的起源

■React是2013年，Facebook开源的JavaScript框架，那么当时为什么Facebook要推出这样一款框架呢？ ■这个源于一个需求，所产生的bug：口该功能上线之后，总是出现bug；

口三个消息的数字在发生变化时，过多的操作很容易产生bug；abug是否可以修复呢？当然可以修复，但是Facebook的工程师并不满足于此；口他们开始思考为什么会产生这样的问题；口在传统的开发模式中，我们过多的去操作界面的细节；（前端、iOS、Android） √并且需要掌握和使用大量DOM的API，当然我们可以通过jQuery来简化和适配一些API的使用；口另外关于数据（状态），往往会分散到各个地方，不方便管理和维护；

[图片上传失败...(image-5fcabb-1591685307218)]

■他们就去思考，是否有一种新的模式来解决上面的问题：口1.以组件的方式去划分一个个功能模块口2.组件内以jsx来描述UI的样子，以state来存储组件内的状态口3.当应用的状态发生改变时，通过setState来修改状态，状态发生变化时，UI会自动发生更新

React的特点

■声明式编程：口声明式编程是目前整个大前端开发的模式：Vue、React、Flutter、SwiftUI；口它允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面；

[图片上传失败...(image-27651e-1591685307218)]

口组件化开发：

页面目前前端的流行趋势，我们会讲复杂的界面拆分成一个个小的组件；口如何合理的进行组件的划分和设计也是后面我会讲到的一个重点；

[图片上传失败...(image-b9ba52-1591685307218)]

■多平台适配：口2013年，React发布之初主要是开发Web页面；口2015年，Facebook推出了ReactNative，用于开发移动端跨平台；（虽然目前Flutter非常火爆，但是还是有很多公司在使用ReactNative）；口2017年，Facebook推出ReactVR，用于开发虚拟现实Web应用程序；（随着5G的普及，VR也会是一个火爆的应用场景）；

[图片上传失败...(image-a60245-1591685307218)]

掌握最先进的思想和技术

■React由Facebook来更新和维护，它是大量优秀程序员的思想结晶：口React的流行不仅仅局限于普通开发工程师对它的认可，大量流行的其他框架借鉴React的思想： ■Vue.js框架设计之初，有很多的灵感来自Angular和React。 ■包括Vue3很多新的特性，也是借鉴和学习了React口比如React Hooks是开创性的新功能（也是我们课程的重点）口Vue Function Based API学习了React Hooks的思想

■Flutter的很多灵感都来自React，来自官网的一段话：（SwiftU呢）口事实上Flutter中的Widget-Element-RenderObject，对应的就是JSX-虚拟DOM-真实DOM Flutter widgets are buit using a modern framework that takes inspiration from React.■所以React可以说是前端的先驱者，它总是会引领整个前端的潮流。

■所以React可以说是前端的先驱者，它总是会引领整个前端的潮流。

React 现状

HackerRank调查显示

在HackerRank中，2020年有一份调查，你更想要学习的framework（框架）：

[图片上传失败...(image-214d93-1591685307218)]

[图片上传失败...(image-21ba2d-1591685307218)]

Hello React案例

■为了演练React，我们可以提出一个小的需求：口在界面显示一个文本：Hello World口点击下方的一个按钮，点击后文本改变为Hello React

[图片上传失败...(image-d41a2a-1591685307218)]

■但是，我们使用React实现之前，先使用原生代码来实现，这样更加方便大家对比React和原生：口当然，你也可以使用jQuery和Vue来实现，对它们分别进行对比学习

推荐使用VS code编辑器

vs code 推荐插件

[图片上传失败...(image-7d5c6-1591685307218)]

React开发依赖

开发React必须依赖三个库：口react：包含react所必须的核心代码口 react-dom：react渲染在不同平台所需要的核心代码口 babel：将isx转换成React代码的工具 ·第一次接触React会被它繁琐的依赖搞蒙，对于Vue来说，我们只是依赖一个vue.js文件即可，但是react居然要依赖三个库。口其实呢，这三个库是各司其职的，目的就是让每一个库只单纯做自己的事情：口在React的0.14版本之前是没有react-dom这个概念的，所有功能都包含在react里口为什么要进行据分呢？原因就是react-native. Dreact包中包含了react和react-native所共同拥有的核心代码。 a react-dom针对web和native所完成的事情不同：口web端：react-dom会讲jsx最终渲染成真实的DOM，显示在浏览器中口 native端：react-dom会讲jsx最终渲染成原生的控件（比如Android中的Button，ios中的U1Button）.

认识Babel

babel是什么呢？口 Babel，又名Babel.js. 口是目前前端使用非常广泛的编辑器、转移器。口比如当下很多浏览器并不支持ES6的语法，但是确实ES6的语法非常的简洁和方便，我们开发时希望使用它. 口那么编写源码时我们就可以使用ES6来编写，之后通过Babel工具，将ES6转成大多数浏览器都支持的ES5的语法。

[图片上传失败...(image-b083ca-1591685307217)

React和Babel的关系：口默认情况下开发React其实可以不使用babel. 口但是前提是我们自己使用React.createElement来编写源代码，它编写的代码非常的繁琐和可读性差。口那么我们就可以直接编写jsx（JavaScript XML）的语法，并且让babel帮助我们转换成React.createflement. 口后续还会讲到；

引入React依赖

·所以，我们在编写React代码时，这三个依赖都是必不可少的。 ·那么，如何添加这三个依赖：

口方式一：直接CDN引入口方式二：下载后，添加本地依赖口方式三：通过npm管理（后续脚手架再使用）

[React官网] https://zh-hans.reactjs.org/

暂时我们直接通过CDN引入，来演练下面的示例程序：口这里有一个crossorigin的属性，这个属性的目的是为了拿到跨域脚本的错误信息

React添加三个依赖