09_DOM的Diffing算法

最新推荐文章于 2024-07-23 12:35:43 发布

又菜又爱玩代码

最新推荐文章于 2024-07-23 12:35:43 发布

阅读量55

点赞数

分类专栏： react学习文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_46431018/article/details/126163183

版权

react学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.验证Diffing算法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>验证diffing算法</title>
</head>

<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/18.2.0/react.development.js"></script>
    <script type="text/javascript" src="../js/18.2.0/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

    <script type="text/babel">
        class Time extends React.Component {

            state = {
                date: new Date()
            }


            //组件挂载完毕时
            componentDidMount() {
                setInterval(() => {
                    this.setState({
                        date: new Date()
                    })
                }, 1000);
            }

            render() {
                console.log('render')
                return (
                    <div>
                        <h1>hello</h1>
                        <input type="text" />
                        <span>现在是北京时间：{this.state.date.toTimeString()}</span>
                    </div>
                )
            }
        }

        // ReactDOM.render(<Time />, document.getElementById("test"))
        const root = ReactDOM.createRoot(document.getElementById('test'));
        root.render(
            <React.StrictMode>
                <Time />
            </React.StrictMode>
        );
    </script>
</body>

</html>

2.key的作用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
    <script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

    <script type="text/babel">
        /* 
        慢动作回放---使用index索引值作为key

            初始数据：
                { id: 1, name: 'ccc', age: 18 },
                { id: 2, name: 'ddd', age: 19 }

            初始的虚拟DOM：
                <li key=0>ccc---18 <input type="text"/></li>
                <li key=1>ddd---19 <input type="text"/></li>
            
            更新后的数据：
                { id: 3, name: '小王', age: 22 },
                { id: 1, name: 'ccc', age: 18 },
                { id: 2, name: 'ddd', age: 19 }
            
            更新数据后的虚拟DOM：
                <li key=0>小王---22 <input type="text"/></li>
                <li key=1>ccc---18 <input type="text"/></li>
                <li key=2>ddd---19 <input type="text"/></li>

---------------------------------------------------------------------------------------------------------------------------------
        慢动作回放---使用id索引值作为key

            初始数据：
                { id: 1, name: 'ccc', age: 18 },
                { id: 2, name: 'ddd', age: 19 }

            初始的虚拟DOM：
                <li key=1>ccc---18 <input type="text"/></li>
                <li key=2>ddd---19 <input type="text"/></li>
            
            更新后的数据：
                { id: 3, name: '小王', age: 22 },
                { id: 1, name: 'ccc', age: 18 },
                { id: 2, name: 'ddd', age: 19 }
            
            更新数据后的虚拟DOM：
                <li key=3>小王---22 <input type="text"/></li>
                <li key=1>ccc---18 <input type="text"/></li>
                <li key=2>ddd---19 <input type="text"/></li>


         */
        class Person extends React.Component {
            state = {
                persons: [
                    { id: 1, name: 'ccc', age: 18 },
                    { id: 2, name: 'ddd', age: 19 }
                ]
            }

            add = () => {
                const { persons } = this.state
                const p = {
                    id: persons.length + 1,
                    name: '小王',
                    age: 22
                }
                this.setState({
                    persons: [p, ...persons]
                })
            }
            render() {
                return (
                    <div>
                        <h2>展示人员信息</h2>
                        <button onClick={this.add}>添加一个人的信息</button>
                        <h3>使用index索引值作为key</h3>
                        <ul>
                            {
                                this.state.persons.map((personsObj, index) => {
                                    return <li key={index}>{personsObj.name}---{personsObj.age} <input type="text"/></li>
                                })
                            }
                        </ul>
                        <hr />
                        <hr />
                        <h3>使用id(数据的唯一值)作为key</h3>
                        <ul>
                            {
                                this.state.persons.map((personsObj, index) => {
                                    return <li key={personsObj.id}>{personsObj.name}---{personsObj.age} <input type="text"/></li>
                                })
                            }
                        </ul>
                    </div>
                )
            }
        }

        ReactDOM.render(<Person />, document.getElementById("test"))
    </script>
</body>

</html>