文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

三个容易混淆的前端框架概念

2024-11-30 17:12

关注

大家好,我卡颂。

有3个容易混淆的前端框架概念:

  1. 响应式更新
  2. 单向数据流
  3. 双向数据绑定

在继续阅读本文前,读者可以思考下是否明确知道三者的含义。

这三者之所以容易混淆,是因为他们虽然同属前端框架范畴内的概念,但又不是同一抽象层级的概念,不好直接比较。

本文会从3个抽象层级入手讲解这三者的区别。

响应式更新

​「响应式更新」也叫「细粒度更新」。同时,最近前端圈比较火的​​Signal​​这一概念描述的也是「响应式更新」。

笼统的讲,「响应式更新」描述的是「状态与UI之间的关系」,即「状态变化如何映射到UI变化」。

考虑如下例子(例子来自what are signals[1]一文):

function TodoApp() {
const [todos, setTodos] = useState(
[{ text: 'sleep', completed: false }]
)

const [showCompleted, setShowCompleted] = useState(false)

const filteredTodos = useMemo(() => {
return todos.filter((todo) => !todo.completed || showCompleted)
}, [todos, showCompleted])

return (
<TodoList todos={filteredTodos} />
)
}

在TodoApp组件中,定义了两个状态:

以及根据上述状态派生出的状态filteredTodos​。最终,返回组件。

如果todos​状态变化,UI该如何变化?即「我们该如何知道状态变化的影响范围」?这时,有两个思路:

推的原理

我们可以从变化的状态(例子中为todos)出发,根据状态的派生关系,一路推下去。

图片来自what are signals一文

在例子中:

  1. todos变化
  2. filteredTodos​由todos派生而来,变化传导到他这里
  3. ​组件依赖了filteredTodos,变化传导到他这里
  4. 确定了todos变化的最终影响范围后,更新对应UI

这就建立了「状态与UI之间的关系」。

除了「推」之外,还有一种被称为「拉」的方式。

拉的原理

同样的例子,我们也能建立「状态与可能的UI变化的关系」,再反过来推导​​UI​​变化的范围。

图片来自what are signals一文

在例子中:

  1. todos变化。
  2. 可能有UI变化(因为建立了「状态与可能的UI变化的关系」)。
  3. UI​与组件相关,判断他是否变化。
  4. ​组件依赖filteredTodos,filteredTodos由todos派生而来,所以filteredTodos是变化的。
  5. 既然filteredTodos变化了,那么组件可能变化。
  6. 计算变化的影响范围,更新UI。

在主流框架中,React​的更新以「推」为主,Vue​、Preact​、Solid.js等更多框架使用「拉」的方式。

本文聊的「响应式更新」就是「拉」这种方式的一种实现。

单向数据流

我们可以发现,不管是「推」还是「拉」,他们都需要计算变化的影响范围,即「一个状态变化后,究竟有多少组件会受影响」。

那么,从框架作者的角度出发,是希望增加一些约束,来减少「计算影响范围」这一过程的复杂度。

同样,从框架使用者的角度出发,也希望增加一些约束,当「计算影响范围」出​​bug​​后,更容易排查问题。

这就有了「单向数据流」。

「单向数据流」是一条约定,他规定了「当状态变化后,变化产生的影响只会从上往下传递」。

考虑如下例子:

function Parent() {
const [num] = useState(0);
return <Child data={num}/>;
}

function Child({data}) {
const isEven = data % 2 === 0;
return <GrandChild data={isEven}/>;
}

function GrandChild({data}) {
return <p>{data}p>;
}

​组件的状态num​作为props​传给​组件,再作为props​传给组件,整个过程只能自上而下。

「单向数据流」并不是实现前端框架必须遵循的原则,他的存在主要是为了减少开发者的心智负担,让「状态变化后,计算影响范围」这一过程更可控。

双向数据绑定

当本文开篇聊「响应式更新」时,讨论的是「状态与UI的关系」,这是将框架作为一个整体来讨论,抽象层级比较高。

当我们继续聊到「单向数据流」时,讨论的是「状态变化的影响范围在组件间单向扩散」,这是「组件与组件之间的关系」,抽象层级下降了一级。

接下来我们要讨论的「双向数据绑定」,讨论的是单个组件内发生的事。

「双向数据绑定」是「状态+改变状态后触发的回调」相结合的语法糖。

这里不讨论框架语境下「语法糖」一词是否完全准确

比较知名的「双向数据绑定」实现,比如​​Vue​​中的​​v-model​​语法:

相当于如下状态+事件回调的组合:

实际上早期React中也有类似实现,名叫LinkedStateMixin[2],只是早已被废弃

总结

我们可以用一张图概括本文介绍的3个概念之间的关系:

概括起来主要是两点:

其中:

参考资料

[1]what are signals:https://signia.tldraw.dev/docs/what-are-signals。

[2]LinkedStateMixin:https://reactjs.org/docs/two-way-binding-helpers.html。

来源:魔术师卡颂内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯