浅谈react

88 阅读4分钟

目的:

让非前端的小伙伴多一点对react的认识,知道他是干什么的,本期尽量浅显一点,算是科普。

讲react之前,先说一下前端是什么,现在前端领域比较广,我们主要说H5方向,前端主要是提供在pc/mobile这些终端显示上的一个视觉界面,跟抽象的后端对比,它能让你能看得见摸得着。

前端技术构成:html、css、js,这是前端的三大基础,

有了对前端的基本概念后我们再讲react:

首先它是什么

它是一个前端UI框架,既然是框架,那我们就自然而然想到它提供的是整套的技术解决方案,放在前端领域,它提供的是:声明式UI、组件化、跨平台等技术方案。

那为什么我们要用这样一个框架,这个要从前端的历史和未来找答案。

在没有使用像react、vue这些框架之前,为应对不同厂商的浏览器、以及浏览器内核版本不断迭代、交互不断变得复杂、用户体验要求不断升高情况,前端的开发遇到了很多阻力。

我们分阶段来说,不同厂商的浏览器以及同一个厂商不同版本都可能出现对同一个东西有不同解释的情况,比如一个html标签在不同浏览器中的内外边距是不同的,一个点击事件的绑定方式也会出现不同的情况,前端为了对这些浏览器器进行适配,往往要写非常多处理兼容的代码,而jQuery的出现就解决了部分的兼容性问题;

但即使有了jQuery,在交互变得不断复杂、体验要求不断升高的时候,我们又遇到了新的情况:页面与逻辑的复用、交互的流畅度成了更大的问题,我们举几个例子:

一个项目中,表单、表格、头像等等在非常多的页面都会出现,但是我们却没有比较好的方式将这些通用的东西进行UI与逻辑的复用,导致我们要重复性编写;第二个例子是例如我们要实现一个全选功能,对于一个长列表来说,有多少条数据,我们就要对DOM进行多少次的操作,浏览器就要渲染多少次,这对浏览器来说压力很大,就容易出现卡顿问题,对用户的体验非常不好,同时我们还要一个个手动找到这些复选框进行Dom的修改。那像复用与Dom操作的性能问题等等,就是后来出现的前端框架重点解决的,当然这些框架还在其他方面例如路由、跨平台等方面提供了支持。

React****核心思路:

知道了要解决什么,我们就来说说react是如何解决这些问题的,今天只说一下react的实现思路。

React提供了组件化的开发模式。在不用框架的时候,我们编写代码是以页面为单元,先建一个当前页面的html,将内容用htmL描述出来,再写js部分,为页面有交互的地方添加上事件,交互的结果则由js去拼装新的html元素在页面替换,或者找到要修改的Dom元素进行修改。

而react开发中,只需要一个空的html模板提供一个跟节点,所有需要呈现的内容则全部由react代码去生成,如果要新增页面,则新增一个组件,组件内自己管理需要渲染出的内容,以及交互的逻辑。页面可以用组件来表达,页面中的某一部分也可以用组件表达,组件之中可以嵌套组件,这就解决了一些通用部分的UI与逻辑的复用问题。这就是react的核心思想之一组件化。

React的另一个核心思想是声明式UI编写方式,UI的修改不在需要直接找到DOM进行操作,而是提供了代码与DOM的桥接,代码只需要关心数据的变动,数据变动时引起的UI改变,交由react处理,在react处理的过程中其可以进行渲染的优化。以之前全选的例子,我们只需要更新需要选中的数据,react可以将多次更新进行合并处理,同时更新的过程也可以进行分片,在CPU空闲时进行任务处理,不至于一个大任务阻塞其他的交互。

同时react提供了跨平台能力,由于其提供了代码与Dom的桥接即虚拟DOM,我们只需要引入不同平台对应的库即可,例如react-Dom适用于H5开发,react-native用于安卓与IOS的原生开发,react-360用于VR应用的开发。

以上3点即react的核心思想。