一个React diff算法引起的bug

问题描述

项目中有一个列表渲染,点击搜索按钮后,列表会根据输入的内容进行过滤。但是我用了名字字段作为key,这个名字是可以重复的,点击搜素后,数据并不是想要的结果,多了一些接口外的数据。例如下方代码: 页面默认显示数据1,数据1-重复,执行点击事件后,理论上页面显示一个数据2,但是实际显示的是数据1、数据2

jsx 复制代码
import { useState } from "react";
import styles from "./app.module.css";

function App() {
  const [arr, setArr] = useState([
    {
      label: "数据1",
      value: 1,
    },
    {
      label: "数据1-重复",
      value: 1,
    },
  ]);
  return (
    <div className={styles.card}>
      <button
        onClick={() =>
          setArr([
            {
              label: "数据2",
              value: 2,
            },
          ])
        }
      >
        改变
      </button>
      <div>
        {arr.map((item) => (
          <div key={item.value} className={styles.card_item}>
            {item.label}
          </div>
        ))}
      </div>
    </div>
  );
}
export default App;

问题原因

这个问题主要是因为react diff算法引起的,具体是多节点比较时,发生了问题。react多节点比较主要是reconcileChildrenArray这个函数,会进行2轮遍历,第一轮遍历newChildren,判断对应新旧的key是否一致,下面代码中新的newChildren的一个key是2,old是1,不能复用newFiber为null,就会结束第一轮遍历。

接下来会判断新老节点是否遍历完成,例子中新老都没有遍历完成。然后会把剩余旧节点,以key||index作为Map的key,对应fiber为value。注意这一个操作会把数据1-重复替换数据1。 第二次会遍历剩余新节点,发现在map中没有可以复用的,结束第二轮遍历,然后遍历Map删除旧的剩余节点,比如数据1-重复。

所以最后剩下了数据1,本应该删除的,但是遗留下来了。 vue是没有这个问题的,react为什么不解决这个问题呢?

相关推荐
小牛itbull1 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
FinGet13 小时前
那总结下来,react就是落后了
前端·react.js
王解16 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
AIoT科技物语1 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情1 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
番茄小酱0011 天前
ReactNative中实现图片保存到手机相册
react native·react.js·智能手机
王解1 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
小牛itbull1 天前
ReactPress—基于React的免费开源博客&CMS内容管理系统
前端·react.js·开源·reactpress
~甲壳虫2 天前
react中得类组件和函数组件有啥区别,怎么理解这两个函数
前端·react.js·前端框架
用户8185216881172 天前
react项目搭建create-router-dom,redux详细解说
react.js