React 是目前最流行的前端框架之一，具有很多优点，可以帮助开发者提高开发效率、优化性能、提高用户体验，同时也能使得应用更加易于维护和升级。

React 的历史与运用

前端应用开发，如 Facebook，Instagram，Netflix 网页版。
移动原生应用开发，如 Instagram，Discord，Oculus。
结合 Electron，进行桌面应用开发。

React 是什么？

React 是一个快速构建前端视图的JavaScript库，用于构建用户界面，尤其适用于单页应用程序。React 使用虚拟 dom 构建真实 dom。

React的特点

React 使用jsx语法
React 使用组件式开发
React 是单向响应的数据流
React 支持服务器端渲染

什么是 JSX ？

JSX 是 ECMAScript 的类似 XML 的语法扩展。
基本上，它只是为React.createElement()函数提供语法糖，为我们提供 JavaScript 的表现力以及类似 HTML 的模板语法。

如何在 React 中创建组件？

Function Components：这是创建组件的最简单方法，这些是纯 JavaScript 函数，它们接受 props 对象作为第一个参数并返回 React 元素：

function Greeting({ message }) {
    return <h1>{`Hello, ${message}`}</h1>
}

Class Components:你也可以使用ES6类来定义一个组件，上面的函数组件可以写成：

Class Greeting extends React.Component {
    render() {
        return <h1>{`Hello, ${this.props.message}`}</h1>
    }
}

React 中虚拟 DOM 是如何工作的？

Virtual DOM 虚拟 DOM (VDOM) 是 Real DOM (真实DOM) 的内存表示。UI 表示保存在内存中并与“真实” DOM 同步，这是在调用渲染函数和在屏幕上显示元素之间发生的一个步骤。这整个过程称为 reconciliation 。Virtual DOM 通过三个简单的步骤工作：

每当任何底层数据发生更改时，整个UI都会在虚拟DOM表示中重新呈现
然后计算之前的DOM表示和新的DOM表示之间的差异
一旦计算完成，真正的DOM将只使用实际更改的内容进行更新

响应式系统与 React ｜ 青训营