React 中的三个关键和一个核心笔者使用 React 开发超过五年，先后用 React 做过大中小各种项目，积累一些使

笔者使用 React 开发超过五年，先后用 React 做过大中小各种项目，积累一些使用心得。

通过横向对比 Vue/Svelte 框架，纵向对比 JQuery 等工具，笔者尝试遵循把一本书读厚，再把一本书读薄的原则，思考前端框架必须解决基础问题（如同宇宙基本问题），删繁去简，高度总结前端所有框架需要解决的共性问题

经过笔者的思考，所有的现代化前端框架需要解决状态绑定/DOM 循环/DOM 流程控制三个关键和事件绑定一个核心

下面是笔者的详细总结

三个关键

在使用 JQuery 的时代，绑定、更新和销毁状态是直接操作 DOM 节点。

以下面这行非常简单的代码为例

<div>count: <span>?</span></div>

用JQuery绑定span标签的值的代码如下

$('span').count(0)

// 更新count的值，$('span').count(1)

代码虽然简单，但是背后涉及遍历DOM树获取节点，然后编辑节点内容。如果频繁操作很多节点，性能开销很大

而 React 提出虚拟 DOM 的概念，减少开发人员直接操作真实的 DOM 节点。React 提出了新的 HTML 书写方式，如下

<div>count: <span>{count}</span></div>

形如上面的格式，React 称为 JSX 语法，其中的 {}是插值表达式语法，用于绑定数据状态，也可以执行一些业务逻辑，React 会自动追踪状态的变化，并在状态改变时重新渲染组件，实现界面上的数据更新

这从根本上改变状态绑定与更新的表现形式

列表是 HTML 中非常常见的内容，而实现列表需要使用 DOM 循环，而在 React 中采用 map 方法实现 DOM 循环

下面是用户列表示例

<ul>
{users.map((user) => (
  <li key={user.id}>
    <h3>{user.name}</h3>
    <p>{user.email}</p>
  </li>
))}
</ul>

流程控制如同列表一样是 HTML 中非常重要的逻辑，如何优雅表达 DOM 片段非常重要

在 React 中，我们采用三元表达式实现流程控制，如下所示

{visible ? <Users/> : <Empty/>}

前端的核心就是用户交互，而用户交互通过各种事件完成。事件涉及如何监听/移除等。

在使用 JQuery 开发前端产品的时代，添加监听事件，需要先获取对应的 DOM 节点，然后使用事件监听器添加事件。

而现在使用 React 开发，只需要在对应的 JSX 代码上添加事件皆可

const handleClick = () => {}

<div onClick={handleClick}>Click</div>

而事件销毁是由 React 运行时负责的，开发人员只需要聚焦业务上