02_邂逅React开发技术.pdfVIP

邂逅React开发

王红元coderwhy

目录

1React的介绍和特点

content

2HelloReact案例

3React开发依赖分析

4React组件化的封装

5React数据事件处理

6React其他案例实现

coderwhyReact的介绍（技术角度）

◼React是什么？

React：用于构建用户界面的JavaScript库；

React的官网文档：/

coderwhyReact的特点–声明式编程

◼声明式编程：

声明式编程是目前整个大前端开发的模式：Vue、React、Flutter、SwiftUI；

它允许我们只需要维护自己的状态，当状态改变时，React可以根据必威体育精装版的状态去渲染我们的UI界面；

coderwhyReact特点–组件化开发

◼组件化开发：

组件化开发页面目前前端的流行趋势，我们会将复杂的界面拆分成一个个小的组件；

如何合理的进行组件的划分和设计也是后面我会讲到的一个重点；

coderwhyReact的特点–多平台适配

◼多平台适配：

2013年，React发布之初主要是开发Web页面；

2015年，Facebook推出了ReactNative，用于开发移动端跨平台；（虽然目前Flutter非常火爆，但是还是有很多公司在使用

ReactNative）；

2017年，Facebook推出ReactVR，用于开发虚拟现实Web应用程序；（VR也会是一个火爆的应用场景）；

coderwhyHelloReact案例说明

◼为了演练React，我们可以提出一个小的需求：

在界面显示一个文本：HelloWorld

点击下方的一个按钮，点击后文本改变为HelloReact

◼当然，你也可以使用jQuery和Vue来实现，甚至是原生方式来实现，对它们分别进行对比学习

coderwhyReact的开发依赖

◼开发React必须依赖三个库：

react：包含react所必须的核心代码

react-dom：react渲染在不同平台所需要的核心代码

babel：将jsx转换成React代码的工具

◼第一次接触React会被它繁琐的依赖搞蒙，居然依赖这么多东西：（直接放弃？）

对于Vue来说，我们只是依赖一个vue.js文件即可，但是react居然要依赖三个包。

其实呢，这三个库是各司其职的，目的就是让每一个库只单纯做自己的事情;

在React的0.14版本之前是没有react-dom这个概念的，所有功能都包含在react里；

◼为什么要进行拆分呢？原因就是react-native。

react包中包含了reactweb和react-native所共同拥有的核心代码。

react-dom针对web和native所完成的事情不同：

✓web端：react-dom会将jsx最终渲染成真实的DOM，显示在浏览器中

✓native端：react-dom会将jsx最终渲染成原生的控件（比如Android中的Button，iOS中的UIButton）。

coderwhyBabel和React的关系

◼babel是什么呢？

Babel，又名Babel.js。

是目前前端使用非常广泛的编译器、转移器。

比如当下很多浏览器并不支持ES6的语法，但是确实ES6的语法非常的简洁和方便，我们开发时希望使用它。

那么编写源码时我们就可以使用ES6来编写，之后通过Babel工具，将ES6转成大多数浏览器都支持