当前位置:首页>React教程>React教程

React教程

作者:微学网发布时间:2019-08-10 23:10:15

React产生背景

在web应用开发的早期,构建Web应用的唯一方案就是向服务器发送请求,然后服务端响应请求并且返回一个完整的页面。

从开发的角度上讲这种方法非常简单,因为开发者无须关心在浏览器端发生了什么。

像PHP这种语言,更加简化了这种开发方式。

使用PHP开发功能组件也很容易,这有助于开发者重用代码,掌握应用程序的行为。

开发的简单性使得PHP成为了一门非常流行的Web应用开发语言。

不过,使用这种开发方式很难打造出极佳的用户体验。因为无论每次用户想要做点什么,都需要向服务端发送请求并等待服务端的响应,这会导致用户失去在页面上所积累的状态。

为了实现更好的用户体验,人们开始开发类库,使用JavaScript在浏览器端渲染应用。

这些类库使用的方法也不尽相同简单的会使用带参数的模板,复杂的就完全掌握整个应用。

随着开发者在越来越大的应用中使用这些类库,应用也变得越来越难于把握,因为这些应用是一系列互相作用的事件的结果。与PHP那样传统的应用开发方式比起来,这种客户端应用很难做好。

React发源自Facebook的PHP框架XHP的一个分支。XHP作为一个PHP框架,旨在每次有请求进来时渲染整个页面。react的产生就是为了把这种重新渲染整个页面的PHP式工作流带到客户端应用中来。

React本质上只关心两件事:

  • 1.更新DOM

  • 2.响应事件。

React不处理Ajax、路由和数据存储,也不规定数据组织的方式。

它不是一个Model-View-Controller框架。如果非要问它是什么,他就是MVC里的“V”。

React的精简允许你将它集成到各种各样的系统中 。

每次状态改变时,使用JavaScript重新渲染整个页面会非常慢,这应该归咎于读取和更新DOM的性能问题。React运用一个虚拟的DOM实现了一个非常强大的渲染系统,在React中对DOM只更新不读取。

什么是React

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。

做出来以后,发现这套东西很好用,就在2013年5月开源了。

由于 React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。

所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。

React 是一个用于构建用户界面的 JavaScript 库。

React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。

React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。

React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

React工作原理

React以渲染函数为基础。这些函数读入当前的状态,将其转换为目标页面上的一个虚拟表现。

只要React被告知状态有变化,他就会重新运行这些函数,计算出页面的一个新的虚拟表现,接着自动把结果转换成必要的DOM更新来反映新的表现。

这种方式看上去应该比通常的JavaScript方案——按需要更新每一个元素——要慢,但是React确实是这么做的:它使用了非常高效的算法,计算出虚拟页面当前版本和新版间的差异,基于这些差异对DOM进行必要的最少更新。

React赢就赢在了最小化了重绘,并且避免了不必要的DOM操作,这两点都是公认的性能瓶颈。

React 特点

声明式设计

React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。以声明式编写UI,可以让你的代码更加可靠,且方便调试。

高效

React通过对DOM的模拟,最大限度地减少与DOM的交互。

灵活

React可以与已知的库或框架很好地配合。

JSX

JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。

组件

创建好拥有各自状态的组件,再由组件构成更加复杂的界面。无需再用模版代码,通过使用JavaScript编写的组件你可以更好地传递数据,将应用状态和DOM拆分开来。

单向响应的数据流

React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单

一次学习,随处编写

无论你现在正在使用什么技术栈,你都可以随时引入 React 来开发新特性,而不需要重写现有代码。React 还可以使用 Node 进行服务器渲染,或使用 React Native 开发原生移动应用。

学习React教程需要的前置知识

在这里我们已经假设你对 HTML 和 JavaScript 都比较熟悉了,不过即使你之前都没有了解过也可以接着跟着教程试试看。