React简介
一个构建用户页面的Javascript库,主要构建UI,拥有较高性能,代码逻辑简单
React 特点
- 1.声明式设计 −React采用声明范式,可以轻松描述应用。
- 2.VDOM −React通过对DOM的模拟,最大限度地减少与DOM的交互。
- 3.灵活 −React可以与已知的库或框架很好地配合。
- 4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
- 5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
- 6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。
声明式设计
开发者为应用程序的每个状态设计视图,React 在数据变化时更新和渲染组件。这与命令式编程形成对比。
虚拟DOM
React 创建内存中的数据结构缓存,计算结果差异,然后有效地更新浏览器显示的 DOM。这个过程称为**reconciliation **。这允许程序员编写代码,就像在每次更改时渲染整个页面一样,而 React 仅渲染实际更改的组件。这种选择性渲染显着提升了性能。
JSX
JSX,即 JavaScript Syntax Extension,是 JavaScript 语言语法的扩展。外观与 HTML 类似, JSX 提供了一种使用许多开发人员熟悉的语法来构建组件渲染的方法 。React 组件通常使用 JSX 编写,但并非必须如此(组件也可以用纯 JavaScript 编写)。JSX 类似于 Facebook 为PHP创建的另一种扩展语法,称为XHP。
An example of JSX code:
class App extends React.Component {
render() {
return (
<div>
<p>Header</p>
<p>Content</p>
<p>Footer</p>
</div>
);
}
}
组件
React 代码由称为组件的实体组成。这些组件是模块化的且可重复使用。React 应用程序通常由多层组件组成。使用 React DOM 库将组件渲染到DOM中的根元素。渲染组件时,值通过props(“属性”的缩写)在组件之间传递*。组件内部的值称为其状态*。在 React 中声明组件的两种主要方式是通过函数组件和类组件。
单向数据流
为了支持 React 的单向数据流概念(可能与AngularJS的双向流形成对比),开发了 Flux 架构作为流行的MVVM架构的替代方案。Flux 的功能是通过中央**调度程序将操作发送到存储,并且对存储的更改会传播回视图。当与 React 一起使用时,这种传播是通过组件属性完成的。自诞生以来,Flux 已被Redux和 MobX 等库所取代。
Flux 可以被认为是观察者模式的一个变体
Flux 架构下的 React 组件不应直接修改传递给它的任何 props,而应传递回调函数来创建由调度程序发送的操作以修改存储。操作是一个对象,其职责是描述所发生的事情:例如,描述一个用户“关注”另一个用户的操作可能包含用户 id、目标用户 id 和类型USER_FOLLOWED_ANOTHER_USER
。商店可以被认为是模型,可以根据从调度员收到的操作来改变自己。
这种模式有时被表达为“属性向下流动,动作向上流动”。自诞生以来,Flux 已被创建了许多实现,其中最著名的可能是Redux,它具有单个存储,通常称为单一事实来源。