React (二) 虚拟Dom介绍和非Dom的属性介绍

虚拟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。