React Note - 01 - What Is React?

118 阅读3分钟

React 是什么?

1. 简单介绍

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

用户界面相当于一个 UI 界面,一般由 结构(HTML) + 样式(CSS)+ 交互(JS)组成,而 React 是 FaceBook 公司创建的一个能更好的将这三者融合在一起组合成用户界面的一个解决方案。

2. 特性

1)声明式

原文

React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图,当数据改变时 React 能有效地更新并正确地渲染组件。

以声明式编写 UI,可以让你的代码更加可靠,且方便调试。

看到原文可能会有点疑惑:

  1. 为什么叫声明式呢?
  2. 数据改变 => UI渲染?

为什么叫声明式?

I. 声明式编程(Declarative)和命令式编程(Imperative)的概念

这里就必须得聊聊声明式编程和命令式编程的概念。

声明式编程是一种编程范式,侧重于我们想要去做什么程序,而没有指定程序应该如何实现结果的所有细节。

命令式编程侧重于怎么去完成一个程序,描述程序如何逐步运行。

II. React 的 Declarative

React 之所以称为 声明式编程,是因为:当我们设计交互式页面内容时,我们通常需要一步步获取 DOM,添加事件与回调函数,在回调函数中更改 DOM 元素...,这样一步步去完成。而使用了 React 之后,我们可以直接通过更改一个变量的方式去达到想要的结果,中间的一系列操作我们都不用担心,React 会帮我们处理好,我们只关心结果。

2)组件化

原文

创建拥有各自状态的组件,再由这些组件构成更加复杂的 UI。

组件逻辑使用 JavaScript 编写而非模版,因此你可以轻松地在应用中传递数据,并使得状态与 DOM 分离。

组件

把一个完整的页面分成不同的组成部分,每个组成部分就叫做一个组件。

每个组件的 结构/样式/交互 都由自己规定,多个组件可以组合在一起构成复杂的完整UI界面。

类似于导航栏可以做成一个组件,需要用到导航栏的页面可以直接使用这个组件,并通过组件本身提供的一些接口进行一些定制化操作。

状态与 DOM 分离

想要更改 DOM 时,只需要更改状态即可自动更新 DOM ,不需要再去手动更改,即可以只关注状态改变。

3)一次学习,随处编写

原文

无论你现在正在使用什么技术栈,你都可以随时引入 React 来开发新特性,而不需要重写现有代码。

React 还可以使用 Node 进行服务器渲染,或使用 React Native 开发原生移动应用。

3. 参考

[React 官网]  react.docschina.org/ 

[为什么 React 是声明式的]  www.qanswer.top/22826/48490… 

个人学习笔记,如有错误请指出,蟹蟹。