React 中的三个关键和一个核心

25 阅读2分钟

笔者使用 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 会自动追踪状态的变化,并在状态改变时重新渲染组件,实现界面上的数据更新

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

DOM 循环

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

下面是用户列表示例

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

DOM 流程控制

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

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

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

一个核心

事件绑定

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

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

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

const handleClick = () => {}

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

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