提到react fiber,大部分人都知道这是一个react新特性,看过一些网上的文章,大概能说出“纤程”“一种新的数据结构”“更新时调度机制”等关键词。
但如果被问:
- 有react fiber,为什么不需要 vue fiber呢;
- 之前递归遍历虚拟dom树被打断就得从头开始,为什么有了react fiber就能断点恢复呢;
本文将从两个框架的响应式设计为切入口讲清这两个问题,不涉及晦涩源码,不管有没有使用过react,阅读都不会有太大阻力。
什么是响应式
无论你常用的是 react,还是 vue,“响应式更新”这个词肯定都不陌生。
响应式,直观来说就是视图会自动更新。如果一开始接触前端就直接上手框架,会觉得这是理所当然的,但在“响应式框架”出世之前,实现这一功能是很麻烦的。
下面我将做一个时间显示器,用原生 js、react、vue 分别实现:
- 原生js:
想让屏幕上内容变化,必须需要先找到dom(document.getElementById
),然后再修改dom(clockDom.innerText
)。
<div id="root">
<div id="greet"></div>
<div id="clock"></div>
</div>
<script>
const clockDom = document.getElementById('clock');
const greetDom = document.getElementById('greet');
setInterval(() => {
clockDom.innerText = `现在是:${
Util.getTime()}`
greetDom.innerText = Util.getGreet()
}, 1000);
</script>
有了响应式框架,一切变得简单了
- react:
对内容做修改,只需要调用setState
去修改数据,之后页面便会重新渲染。
<body>
<div id="root"></div>
<script type="text/babel">
function Clock() {
const [time, setTime] = React.useState()
const [greet, setGreet] = React.useState()
setInterval(() => {
setTime(Util.getTime())
setGreet(Util.getGreet())
}, 1000);
return (
<div>