React简介

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，它具有单个存储，通常称为单一事实来源。