04_DOM的diffing算法

OM的diffing算法

一、验证 diffing 算法的存在
二、经典面试题：
- 1、React/Vue 中的key 有什么作用？（key 的内部原理是什么？）
- 2、为什么遍历列表时，key 最好不要用 index？
- - 1.虚拟 DOM 中 key 的作用：
  - 2.用 index 作为 key 可能引发的问题
  - 3.开发中如何选择 key？：

一、验证 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 --><scripttype="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">javascript">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 --><scripttype="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">javascript">/**慢动作回放--- 使用 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.statelet 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，随后渲染到页面