8、使用 Electron 和 React 创建聊天系统：规划、设计与开发

使用 Electron 和 React 创建聊天系统：规划、设计与开发

1. React 简介

React 是当下热门的技术，在 2016 年的开发者调查中备受关注。它并非框架，而是用于构建用户界面的 JavaScript 库，具备简洁、强大的特点。React 采用组件驱动架构，我们可以创建可复用、可组合且有状态的 UI 组件，像搭积木一样构建所需的 UI。它将结构视为内存中的 DOM 表示（虚拟 DOM），绑定到真实 DOM 后，能保持两者同步，组件状态改变时，会立即反映在 DOM 视图上。此外，还能在服务器端将虚拟 DOM 转换为 HTML 字符串，随 HTTP 响应发送，客户端自动绑定已有 HTML，加速页面加载并利于搜索引擎抓取内容。

组件本质上是一个函数，接收属性并返回元素，元素是表示组件或 DOM 节点的普通对象。也可使用继承 React.Component 的类，通过 render 方法生成元素。如今，创建元素通常使用 JSX 语法，它扩展了 JavaScript，看起来像 HTML 模板。例如：

const name = 'Jon';
const surname = 'Snow';
const element = (
  <header>
    <h3>{name} {surname}</h3>
  </header>
);

JSX 可通过 Babel 编译器转换为普通 JavaScript，多数现代 IDE 原生支持 JSX 语法。

<