笔记十六、React中的Diffing算法

Bertha 。 2024-05-01 16:23 105阅读 0赞

*  React/vue框架面试题
    
    >  *  框架中为什么要使用虚拟DOM？Diffing算法原理是什么？
    >  *  遍历数组渲染数据时，为什么要是加key属性，用index作为key会有什么问题？
 *  diff算法
    
    >  *  当数据改变时，react会生成新的虚拟dom和旧的虚拟dom进行对比，有不同的节点则重新生成，节点相同则进行复用，不重新生成，提高渲染速度
 *  key值
    
    >  *  `key`主要用在 Vue 虚拟 DOM（类似 js 对象格式的数据） 的 Diff 算法，新旧虚拟 DOM 对比，复用不变的旧节点，渲染改变的节点，提高渲染速度
    >  *  遍历数组不加`key`属性时，则默认使用数组的索引index，在数组元素顺序打乱时，会产生不必要的DOM更新
    >  *  `key`值要使用唯一的id值

import React from "react";
    
    class App extends React.Component {
        state = {
            list: [
                {id: 1, name: "冰冰", hobby: "喝奶茶"},
                {id: 2, name: "anna", hobby: "喝奶茶"},
                {id: 3, name: "老帆", hobby: "打篮球"},
            ],
        };
    
        // 是三个点 ... 是拓展运算符
        addClick = () => {
            const newItem = {id: 4, name: "老王", hobby: "按摩"};
            this.setState({list: [newItem, ...this.state.list]});
        };
    
        // 一.使用index作为key值
        // 初始数据
        // { id:1,name: "冰冰", hobby: "喝奶茶" },
        // { id:2,name: "anna", hobby: "逛街" },
        // { id:3,name: "老帆", hobby: "打篮球" },
    
        // 初始虚拟dom
        // <li key=0>名字：冰冰，爱好：喝奶茶</li>
        // <li key=1>名字：anna，爱好：逛街</li>
        // <li key=2>名字：老帆，爱好：打篮球</li>
    
        // 更新后的数据
        // { id:4,name: "老王", hobby: "按摩" },
        // { id:1,name: "冰冰", hobby: "喝奶茶" },
        // { id:2,name: "anna", hobby: "逛街" },
        // { id:3,name: "老帆", hobby: "打篮球" },
    
        // 更新后的虚拟dom
        // <li key=0>名字：老王，爱好：喝奶茶</li>
        // <li key=1>名字：冰冰，爱好：喝奶茶</li>
        // <li key=2>名字：anna，爱好：逛街</li>
        // <li key=3>名字：老帆，爱好：打篮球</li>
    
        // 二.使用唯一值id作为key值
        // 初始数据
        // {id:1, name: "冰冰", hobby: "喝奶茶" },
        // {id:2,name: "anna", hobby: "逛街" },
        // {id:3, name: "老帆", hobby: "打篮球" },
    
        // 初始虚拟dom
        // <li key=1>名字：冰冰，爱好：喝奶茶</li>
        // <li key=2>名字：anna，爱好：逛街</li>
        // <li key=3>名字：老帆，爱好：打篮球</li>
    
        // 更新后的数据
        // {id:4, name: "老王", hobby: "按摩" },
        // {id:1, name: "冰冰", hobby: "喝奶茶" },
        // {id:2, name: "anna", hobby: "逛街" },
        // {id:3, name: "老帆", hobby: "打篮球" },
    
        // 更新后的虚拟dom
        // <li key=4>名字：老王，爱好：喝奶茶</li>
        // <li key=1>名字：冰冰，爱好：喝奶茶</li>
        // <li key=2>名字：anna，爱好：逛街</li>
        // <li key=3>名字：老帆，爱好：打篮球</li>
    
        render() {
            return (
                <>
                    <h1>小滴课堂人员列表</h1>
                    <input type="text"/>
                    <ul>
                        {this.state.list.map(
                            (item, index) => {
                                return (
                                    // key主要用在 Vue 虚拟 DOM（类似 js 对象格式的数据） 的 Diff 算法，新旧虚拟 DOM 对比，复用不变的旧节点，渲染改变的节点，提高渲染速度
                                    // 遍历数组不加key属性时，则默认使用数组的索引index，在数组元素顺序打乱时，会产生不必要的DOM更新
                                    // <li key={index}> 名字：{item.name}，爱好：{item.hobby}</li>
                                    // key 值要使用唯一的id值
                                    <li key={item.id}> 名字：{item.name}，爱好：{item.hobby}</li>
                                );
                            }
                        )
                        }
                    </ul>
                    <button onClick={this.addClick}>添加人员按钮</button>
                </>
            );
        }
    }
    
    export default App;