04_DOM的diffing算法

最新推荐文章于 2024-08-26 21:46:59 发布

qiao若huan喜

最新推荐文章于 2024-08-26 21:46:59 发布

阅读量548

点赞数 19

分类专栏： React 全家桶文章标签：算法 javascript 前端 react.js

本文链接：https://blog.csdn.net/qq_46143850/article/details/141529281

版权

React 全家桶专栏收录该内容

4 篇文章 0 订阅

订阅专栏

OM的diffing算法

一、验证 diffing 算法的存在
二、经典面试题：

一、验证 diffing 算法的存在

当 input 输入内容，在时间变动的每一秒输入类的dom 都没有变动或者被更新，diffing 算法存在

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="./v18.3.0/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="./v18.3.0/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="./v18.3.0/babel.min.js"></script>

    <!-- 引入 prop-types，用于对组件标签属性进行限制, 存在 PropTypes -->
    <script type="text/javascript" src="./v18.3.0/prop-types.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
        class Time extends React.Component{
            state = {
                date: new Date()
            }
            componentDidMount(){
                setInterval(()=>{
                    this.setState({
                        date: new Date()
                    })
                },1000)
            }
            render(){
                return (
                    <div>
                        <h1>Hello</h1>
                        <input type='text' />
                        <span>
                            现在是{this.state.date.toTimeString()}
                            <input type='text' />
                        </span>
                    </div>
                )
            }
        }
        ReactDOM.render(<Time />,document.getElementById("test"))
    </script>
</body>
</html>

二、经典面试题：

1、React/Vue 中的key 有什么作用？（key 的内部原理是什么？）

2、为什么遍历列表时，key 最好不要用 index？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <!-- 引入 react 核心库 -->
    <script type="text/javascript" src="./v18.3.0/react.development.js"></script>
    <!-- 引入 react-dom，用于支持 react 操作DOM -->
    <script
      type="text/javascript"
      src="./v18.3.0/react-dom.development.js"
    ></script>
    <!-- 引入babel， 用于将 jsx 转为 js -->
    <script type="text/javascript" src="./v18.3.0/babel.min.js"></script>

    <!-- 引入 prop-types，用于对组件标签属性进行限制, 存在 PropTypes -->
    <script type="text/javascript" src="./v18.3.0/prop-types.js"></script>

    <!-- 此处一定要写babel -->
    <script type="text/babel">
        /**
            慢动作回放--- 使用 index 索引值做为 key
            初始数据：
            {id: 1, name:'小刘', age: 24}
            {id: 2, name:'小陈', age: 25}

            初始的虚拟DOM：
            <li key=0>小刘---24</li>
            <li key=1>小陈---25</li>

            更新后的数据：
            {id: 3, name:'小王', age: 21}
            {id: 1, name:'小刘', age: 24}
            {id: 2, name:'小陈', age: 25}

            更新数据后的虚拟 DOM
            <li key=0>小王---21</li>
            <li key=1>小刘---24</li>
            <li key=2>小陈---25</li>
        --------------------------------------------------
        慢动作回放--- 使用 id 索引值做为 key
            初始数据：
            {id: 1, name:'小刘', age: 24}
            {id: 2, name:'小陈', age: 25}

            初始的虚拟DOM：
            <li key=1>小刘---24</li>
            <li key=2>小陈---25</li>

            更新后的数据：
            {id: 3, name:'小王', age: 21}
            {id: 1, name:'小刘', age: 24}
            {id: 2, name:'小陈', age: 25}

            更新数据后的虚拟 DOM
            <li key=3>小王---21</li> 更新，只需要渲染这一个真实dom
            <li key=1>小刘---24</li> 复用
            <li key=2>小陈---25</li> 复用
        */
        class Person extends React.Component{
            state = {
                persons:[
                    {
                        id: 1,
                        name: '小刘',
                        age: 24
                    },
                    {
                        id: 2,
                        name: '小陈',
                        age: 25
                    }
                ]
            }
            componentDidMount(){
                setInterval(()=>{
                    this.setState({
                        date: new Date()
                    })
                },1000)
            }
            add = ()=>{
                let {persons} = this.state
                let p = {
                    id: persons.length+1,
                    name: "小王",
                    age: 21
                }
                this.setState({
                    persons: [p, ...persons]
                })
            }

            render(){
                return (
                    <div>
                        <button onClick={this.add}>添加一个新人</button>
                        <h1>展示人员信息</h1>
                        <h3>使用 index 索引值作为key</h3>
                        <ul>
                            {
                                this.state.persons.map((el,inx)=>{
                                    return <li key={inx}>
                                        {el.name}---{el.age}
                                        <input type='text' />
                                        </li>
                                })
                            }
                        </ul>
                        <h3>使用 id(数据的唯一标识) 索引值作为key</h3>
                        <ul>
                            {
                                this.state.persons.map((el)=>{
                                    return <li key={el.id}>
                                        {el.name}---{el.age}
                                        <input type='text' />
                                    </li>
                                })
                            }
                        </ul>
                       
                    </div>
                )
            }
        }
        ReactDOM.render(<Person />,document.getElementById("test"))
    </script>
</body>
</html>

1.虚拟 DOM 中 key 的作用：

1）简单的说： key 是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用
2）详细的说：当状态中的数据发生改变时， react 会根据【新数据】生成【新的虚拟DOM】，随后React 进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：
a、旧虚拟DOM中找到了与新虚拟DOM相同的key：
（1）若虚拟DOM中内容没变，直接使用之前的真实DOM
（2）若虚拟DOM中内容变了，则生成新的真实，随后替换掉页面中之前的真实DOM
b、旧虚拟DOM中未找到与新虚拟DOM相同的key
根据数据创建新的真实DOM，随后渲染到页面

2.用 index 作为 key 可能引发的问题

1、若对数据进行：逆序添加、逆序删除等破坏顺序操作：
会产生没有必要的真实 DOM 更新===》界面效果没问题，但效率低

2、如果结构中还包含输入类的 DOM：
会产生错误 DOM 更新===》界面有问题

3、注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，
仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的

3.开发中如何选择 key？：

1、最好使用每条数据的唯一标识作为 key，比如 id、手机号、身份证号、学号等唯一值
2、如果确定只是简单的展示数据，用 indexx 也是可以的

qiao若huan喜

关注

19
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
04_DOM的diffing算法

{id: 1, name:'小刘', age: 24}{id: 2, name:'小陈', age: 25}{id: 3, name:'小王', age: 21}{id: 1, name:'小刘', age: 24}{id: 2, name:'小陈', age: 25}{id: 1, name:'小刘', age: 24}{id: 2, name:'小陈', age: 25}{id: 1, name:'小刘', age: 24}{id: 2, name:'小陈', age: 25}
复制链接

扫一扫

专栏目录