虚拟dom

最新推荐文章于 2024-08-06 01:00:21 发布

想吃辣椒炒肉呀

最新推荐文章于 2024-08-06 01:00:21 发布

阅读量127

点赞数

本文链接：https://blog.csdn.net/mengweizhao/article/details/100769521

版权

什么是虚拟DOM

虚拟dom是框架中的概念，是框架中的概念，是程序员用js对象来模拟页面上的DOM和DOM 的嵌套
为什么要使用虚拟dom的这一个概念
- 因为我们实现页面的性能，实现按需渲染页面的这一个功能（只需要重新渲染更新的数据所对应的页面元素）
- 为了实现按需更新我们需要获取新旧dom树，然后通过算法对比然后更新，但是在浏览器中并没有提供获取dom树的api，所以我们手动模拟dom，这就是虚拟dom的存在原因。

怎么实现虚拟dom

类似于下面的js对象，我们利用childer这个属性来实现子元素的嵌套

<script>
  var div = {
    tagName: 'div',
    attrName: 1111,
    children: {
      tagName: 'p',
      attr: 2222
    }
  }
</script>

怎么快速实现新旧dom树的对比实现按需更新

我们使用的是diff算法

react创建dom的三种方式（组件的名字必须是大写字母开头）

es5原生方式React.createClass定义的组件

	React.createElement(元素类型,元素上有哪些属性,表示当前元素的子节点),这个方法，这个方法可以接收三个以上参数

函数式定义的无状态组件

	function Welcome(props) {
		return <h1>Hello, {props.name}</h1>;
	}

es6形式的extends React.Component定义的组件

	import React from 'react';
	import ReactDom from 'react-dom';
	class Com1 extends React.Component{
	    render(){
	        return <div>这是一个Com1组件</div>
	   		}
		}
	export default Com1;

组件间传值问题

给通过构造函数创建的组件简单传值

在vue中我们可以通过属性绑定：属性 = “ ” 绑定值，在react中我们可以通过 <Hell name={name}></Hell> 给组件传递属性值
还有另一种给组件中传数据的方式（传递一个对象过去） <Hell {...对象名}></Hell> 然后我们在构造函数中需要接受一个数据参数props（Hell(props)）,通过props得到的任何数据都是只读的，不能重新赋值ReactDom.render(<Hell {...person}></Hell>,document.getElementById('app'))

条件渲染和阻止组件渲染

通过if进行条件渲染
通过改变元素变量来实现条件渲染
通过与运算符 &&来进行条件渲染
- true && expression 总是返回 expression，false && expression 总是返回 false。
- 然后在渲染中如果条件是true &&右侧的元素就会被渲染，如果条件是false，react会忽略并且跳过它
三目运算符（三元表达式）
如果对于一个组件我们不希望它渲染出来，我们可以通过返回一个null来阻止组件渲染，这个时候组件中的生命周期钩子依然可以被调用