【React】知识点归纳：虚拟 DOM 与 DOM Diff 算法
React高效原因：
1.虚拟（virtual）DOM：不总是直接操作实际的DOM元素，而是先修改virtual DOM里的对象 当要在一个页面连续修改多个地方时 最后将Virtual DOM里所有要修改玩的对象映射到实际的DOM元素里，批量修改，访问更新/重绘的的次数减少。
2. DOM Diff算法，最小化页面重绘：算法计算出哪些地方要修改。只修改要改的地方，减小了更新/重绘的区域。
基本流程图
简单案例
源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04_component</title>
</head>
<body>
<div id="example"></div>
<br>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
/*
验证:
虚拟DOM+DOM Diff算法: 最小化页面重绘
*/
class HelloWorld extends React.Component {
constructor(props) {
super(props)
this.state = {
date: new Date()
}
}
componentDidMount () {
//尽量少用bind 用箭头函数
setInterval(() => {
this.setState({
date: new Date()
})
}, 1000)
}
render () {
console.log('render()')
return (
<p>
Hello, <input type="text" placeholder="Your name here"/>!
<span>It is {this.state.date.toTimeString()}</span>
</p>
)
}
} ReactDOM.render(<HelloWorld/>,document.getElementById('example'))
</script>
</body>
</html>
运行效果
总结
Virtual DOM 算法主要是实现上面步骤的三个函数：element，diff，patch。然后就可以实际的进行使用：
// 1. 构建虚拟DOM
var tree = el('div', {'id': 'container'}, [
el('h1', {style: 'color: blue'}, ['simple virtal dom']),
el('p', ['Hello, virtual-dom']),
el('ul', [el('li')])
])
// 2. 通过虚拟DOM构建真正的DOM
var root = tree.render()
document.body.appendChild(root)
// 3. 生成新的虚拟DOM
var newTree = el('div', {'id': 'container'}, [
el('h1', {style: 'color: red'}, ['simple virtal dom']),
el('p', ['Hello, virtual-dom']),
el('ul', [el('li'), el('li')])
])
// 4. 比较两棵虚拟DOM树的不同，深度优先
var patches = diff(tree, newTree)
// 5. 在真正的DOM元素上应用变更
patch(root, patches)