虚拟 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(){// 创建一个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。