大前端 - react - Fiber概述及React15架构存在的问题

最新推荐文章于 2024-08-13 17:14:46 发布

yanling.zhang

最新推荐文章于 2024-08-13 17:14:46 发布

阅读量518

点赞数

分类专栏：大前端学习文章标签： react.js javascript

本文链接：https://blog.csdn.net/weixin_38245947/article/details/120276119

版权

1. Fiber 出现的目的是什么

为了提高 React 渲染页面的效率，减少页面卡顿，提升用户体验。

在这里插入图片描述

2. 在 Fiber 出现之前 React 存在什么问题

在 React 15 版本中采用的是 Virtual DOM 对比方案，通过对比 Virtual DOM 找出差异部分，从而只将差异部分更新到页面中，避免更新整体 DOM 以提高性能。

<body>
  <ul id="list"></ul>
  <button id="btn">更改数据</button>
</body>
<script>
  let data = ["a", "b", "c", "d", "e"]
  let list = document.getElementById("list")
  let btn = document.getElementById("btn")

  function renderData() {
     
    let str = ""
    for (let attr in data) {
     
      str += "<li>" + data[attr]