虚拟Dom介绍和非Dom的属性介绍

• 虚拟Dom介绍和非Dom的属性介绍
• • • 什么是虚拟 Dom(virtual Dom)
• 非 Dom 属性以及如何使用
• • • dangerouslySetInnerHTML
    • ref
    • key

虚拟Dom介绍和非Dom的属性介绍

什么是虚拟 Dom(virtual Dom)

虚拟 Dom 不是真实的 Dom。

class App extends React.Component {render() {return(<div className="App"><h1>Hello world1</h1></div>);}
}

上面是一个类组件，render 执行的结果不是一个真实 Dom，而是一个轻量级的 javascript 的对象。它最终会把 jsx 编译成 js 对象描述的形式如:

{type: "div", // 标签props: [[]] // 属性
}

这种就会称之为虚拟 Dom。React 对虚拟 Dom 做了一些优化，可以进行批处理，底层进行了 diff 算法这些操作。

操作 dom 的成本很高，每次修改 Dom 浏览器都要进行重绘或者重排，使用了虚拟 Dom，可以避免这些问题。

尽可能少的操作dom， 提高渲染效率

会对比dom哪里进行改变了，去单独修改修改了的部分，而不是真的你整个页面的重绘或者重排。

非 Dom 属性以及如何使用

dangerouslySetInnerHTML

dangerouslySetInnerHTML == 原生中 innerHTML

使用 dangerouslySetInnerHTML 要遵循规则

{__html:'
我是插入的html
'
}function App() {const divTitles = "我是react111";return (<div title={divTitles} className="App" tab-index="1"><h1>Hello world</h1><div dangerouslySetInnerHTML={{__html:"
我是插入的html
"}}></div></div>);
}

在网页中插入html，是很容易被xss攻击，在对插入的代码可以做一些转义的处理。

ref

ref == 原生中的id

可以访问到原生或者组件的实例

访问真实Dom

不能在函数组件上使用，可以在类组件上使用,

// 报错
function App() {const divTitles = "我是react111";const userRef = React.createRef();return (<div title={divTitles} className="App" tab-index="1"><h1 ref={userRef}>Hello world</h1></div>);
}// 不报错
class Footer extends React.Component {render() {const userRef = React.createRef();return(<div ref={userRef}><h1>我是一个类组件</h1></div>);}
}

ref 不能在函数组件上使用，但是可以在函数组件内部使用

function Component1(){// 创建一个refconst inputRef = React.createRef();function handClick() {inputRef.current.focus();};return (<div className="App" tab-index="1"><h1> Component1</h1><button onClick={handClick}>我是按钮</button><input type="text" ref={inputRef}></input></div>);
}

上面代码在点击事件之后，可以聚焦到 input 中

key

提高渲染性能，作用是唯一标准。帮助 React 识别那个元素改变了。如果不加 key 在比较 Dom 元素的时候比较范围会比较大，加了 key 值会缩小比较范围，甚至是直接定位到当前 Dom。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！