虚拟 Dom 和非 Dom 属性

Posted 2021-03-29 澄橙澄

虚拟 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:'<p>我是插入的html</p>'}function App() { const divTitles = "我是react111"; return ( <div title={divTitles} className="App" tab-index="1"> <h1>Hello world</h1> <div dangerouslySetInnerHTML={{__html:"<p>我是插入的html</p>"}}></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(){ // 创建一个ref const 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。