React是什么

React，是用于构建用户界面的JavaScript库，只提供了UI层面的解决方案；
React，是由 Facebook 开源的一个 JavaScript 库

一、特性

1.1 JSX语法

什么是JSX：

JSX是React使用jsx来替代常规的 JavaScript。
JSX是一个看起来很像XML的 JavaScript 语法扩展。
是一种语法糖

JSX的优点：

JSX执行更快，因为它在编译为JavaScript代码后进行了优化
它是类型安全的，在编译过程中就能发现错误
使用 JSX 编写模板更加简单快速

注意点：

JSX就是JavaScript，
一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。

1.2 声明式编程

什么是声明式编程：

是一种编程范式
它的关注点是你要做什么，而不是如何做；它描述目标的性质，让电脑明白目标，而非流程

声明式编程的优点：

使得React组件很容易使用，最终的代码简单易于维护

1.3 单向数据绑定

React 中并没有指令的概念；
React 默认不支持 双向数据绑定，只支持单向数据绑定
作用：保证数据的可控性

什么是数据流：数据流就是数据在组件之间的传递

什么是单向数据流：数据在某个节点被改动后，只会影响一个方向上的其他节点

什么是自顶向下：数据只会影响到下一个层级的节点，不会影响上一个层级的节点（只影响子组件，不会影响父组件）

明确定义单向数据流：规范数据的流向，数据由外层组件向内层组件进行传递和更新。

拓展 - 为什么是单向的？不能是双向的么？

父组件的数据通过props传递给子组件，而子组件更新了props，导致父组件和其他关联组件的数据更新，UI渲染也会随着数据而更新。毫无疑问，这是会导致严重的数据紊乱和不可控制的。

综上所述，不能是双向的

1.4 虚拟DOM

Virtual Dom，本质上是以 JavaScript 对象形式存在的对 DOM 的描述。

创建目的：就是为了更好将虚拟的节点渲染到页面视图中，虚拟DOM对象的节点与真实DOM的属性一一照应

虚拟DOM的优点：

简单方便：如果使用手动操作真实 DOM 来完成页面，繁琐又容易出错，在大规模应用下维护起来也很困难
性能方面：虚拟DOM不会进行排版与重绘操作。使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能
跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行

虚拟DOM的缺点：

在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，速度比正常稍慢

1.5 Component

在React中，一切皆为组件。通常将应用程序的整个逻辑分解为小的单个部分，我们将每个单独的部分称为组件。

组件可以是一个函数或者是一个类，接受数据输入，处理它并返回在UI中呈现的React元素

组件分类：

函数式组件：return一个组件

const Header = () => {
  return (
    <Jumbotron style={{ backgroundColor: "orange" }}>
      <h1>TODO App</h1>
    </Jumbotron>
  );
};

类组件：又称有状态组件。通过render()方法渲染组件

class Dashboard extends React.Component {
  constructor(props) {
    super(props);

    this.state = {};
  }
  render() {
    return (
      <div className="dashboard">
        <ToDoForm />
        <ToDolist />
      </div>
    );
  }
}

组件特点：

可组合：每个组件易于和其它组件一起使用，或者嵌套在另一个组件内部
可重合：每个组件都是具有独立功能，它可以被使用在多个UI场景
可维护：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护

二、React的优势：

高效灵活
声明式的设计，简单易用
组件式开发，提高代码复用率
单向响应的数据流会比双向绑定的更安全，速度更快

【React】介绍