React 概览

各个组件维护自己的状态和
UI，当状态变更，自动重新渲染整个组件。

基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM
元素，然后操作 DOM 去更改 UI。

React 大体包含下面这些概念：

• 组件
• Virtual DOM
• Data Flow

React 应用都是构建在组件之上。

上面的 就是一个 React
构建的组件，最后一句 render 会把这个组件显示到页面上的某个元素 mountNode 里面，显示的内容就是 。

props 是组件包含的两个核心概念之一，另一个是 state（这个组件没用到）。可以把 看作是组件的配置属性，在组件内部是不变的，只是在调用这个组件的时候传入不同的属性（比如这里的 name）来定制显示这个组件。

好消息是你可以不一定使用这种语法，后面会进一步介绍 JSX，到时候你可能就会喜欢上了。现在要知道的是，要使用包含 JSX 的组件，是需要“编译”输出 JS 代码才能使用的，之后就会讲到开发环境。

当组件状态 state 有更改的时候，React 会自动调用组件的 方法重新渲染整个组件的 UI。

当然如果真的这样大面积的操作 DOM，性能会是一个很大的问题，所以 React 实现了一个Virtual
DOM，组件 DOM 结构就是映射到这个 Virtual DOM 上，React 在这个 Virtual DOM
上实现了一个 diff 算法，当要重新渲染组件的时候，会通过 diff 寻找到要变更的 DOM 节点，再把这个修改更新到浏览器实际的
DOM 节点上，所以实际上不是真的渲染整个 DOM 树。这个 Virtual DOM 是一个纯粹的 JS 数据结构，所以性能会比原生 DOM 快很多。