01、React系列之 React简介

发布于 2022年 04月 10日 21:34

腾讯服务器

88 / 年

  • 上海/北京/广州...
  • 2核 2G 4M
  • Linux/Windows
新年大优惠

腾讯服务器

425 / 年

  • 上海/北京/广州...
  • 4核 8G 10M
  • Linux/Windows
年度最便宜

腾讯服务器

1249 / 年

  • 上海/北京/广州...
  • 8核 16G 14M
  • Linux/Windows
点击查看

React简介

一、什么是React

废话不说,我们先看看官方是杂说的


React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.


大概意思就是说 React 是被 Facebook 和 Instagram 创建的一个针对 Ui Js 类库,许多人也把它认为是 MVC 中的 V 层。

话说,FaceBook 对市面上所有的 js 类库都不满意,所以自己就开发了一个,我只能说真是牛「B」呀。有点扯远了。

我们只要知道这个玩意是用来创建 V 的就可以了

二、React 特点

1、简单

用官方的话说就是,使用 React 可以很简单的呈现出你的应用。当然学习也简单

2、声明式

在数据发生变化的时候,React 从概念上讲与点击了 F5 一样,实际上它仅仅是更新了变化的一部分而已(通过虚拟 DOM 技术的 diff 算法)。

3、组件化

Rect 的编写是基于组件的,它是把一个个组件组合起来形成一个界面, Facebook 使用组件化开发代替模板引擎,通过 js 代码生成 View

下幅图可以直观的看到组件化的思想:

MVC:开发者将三者定义成不同的类,实现了表现、数据、控制的分离(从技术角度拆分UI实现松耦合)

React:新的思路,开发者从功能的角度出发,将UI拆成不同的组件。每个组件都独立封装。即按照界面模块自然划分的方式来组织和编写你的代码

4、一次学习,到处使用

并没有说一次编写到处运行,我们可以在客户端渲染,也可以在服务端渲染,还可以在手机 app 上渲染( 使用 RN )

三、React的工作原理(基本原理)

  • 1、Virtual DOM -- 虚拟 DOM

和传统的 Web 应用的不同的是,React 为了减少 Dom 的操作( Dom 的更新代价是比较大的),不是全部更新 Dom 而是通过虚拟 DOM 的技术,就是真实 Dom 的当前 Dom 之间通过 diff 算法比较,只更新改变部分的 Dom ,这就大大提高了性能。

  • 2、基于状态更新( state 和 render )

React 是如何渲染组件,并且在什么渲染组件的,这就要说说 state 和 render 了。state 包含一些组件所需要的属性,如果这些数据发生变化,那么就会自动调用 render() 方法来渲染组件,我们只能通过 React 的 setState() 方法来更新组件状态。

总结:通过本节我们了解了以下几点:

  • 1、React 是一个 V
  • 2、React 没有模板的概念,是通过组件组合来使用
  • 3、React 通过虚拟 Dom 来更新组件
  • 4、React 是一个状态机(通过状态的改变来更新组件)

推荐文章