笔者使用 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
运行时负责的,开发人员只需要聚焦业务上