阿里三面：灵魂拷问——有react fiber，为什么不需要vue fiber呢？

最新推荐文章于 2024-06-17 23:49:16 发布

前端私教年年

最新推荐文章于 2024-06-17 23:49:16 发布

阅读量1k

点赞数 2

文章标签：前端面试 react.js vue.js

本文链接：https://blog.csdn.net/frontend_nian/article/details/123647481

版权

提到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>

最低0.47元/天解锁文章

前端私教年年

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
阿里三面：灵魂拷问——有react fiber，为什么不需要vue fiber呢？

提到react fiber，大部分人都知道这是一个react新特性，看过一些网上的文章，大概能说出“纤程”“一种新的数据结构”“更新时调度机制”等关键词。但如果被问：有react fiber，为什么不需要 vue fiber呢；之前递归遍历虚拟dom树被打断就得从头开始，为什么有了react fiber就能断点恢复呢；本文将从两个框架的响应式设计为切入口讲清这两个问题，不涉及晦涩源码，不管有没有使用过react，阅读都不会有太大阻力。什么是响应式无论你常用的是 react，还是 vue，“响
复制链接

扫一扫