React之元素渲染
Rect之元素渲染
const element = <div>hello,world</div>
如上述代码中所示,我们通过JSX语法创建的就是React元素,通过babel编译,将会变成一个JavaScript对象,(通过浏览器,我们可以查看到),React元素是构成React应用的最小块,描述了你在屏幕上想看到的内容
{
$$typeof:Symbol(react.element),
type:"h1",
key:null,
ref:null,
props:{
children:"hello,world",
__proto__:Object,
_owner:null
},
_srore:{
validated:false,
__proto__:Object,
_self:null,
_source:null,
},
__proto__:Object
}
将一个React元素渲染为DOM
我们需要渲染React元素,只需要用ReactDOM.render(element,container[,callback])
就能实现
假设你的html文件某处有一个<div>
<div id="root"></div>
我们将其称为"根"DOM节点,因为该节点内的所有内容都将由React DOM管理
仅适用React构建的应用通常只有单一的根DOM节点。如果你在将React集成进一个已有应用,那么你可以在应用中包含任意多的独立根DOM节点
将React元素渲染到根节点,那我们就可以这样做:
ReactDOM.render(element,documnet.getElementById("root"))
更新已渲染的元素
React元素是不可变对象。一旦被创建,你就无法更改它的子元素或者属性。
这里解释一下什么是不可变对象。在命令式编程中,内容永远不变的程序变量中保存的值成为常量,以区别于执行期间可能更改的变量。
例子
在JavaScript中string就是不可变的
var statement = "I am an immutable value";
var otherStr = statement.slice(8,7);
上面代码中statement.slice(8,17)
并没有改变statement
变量
那么React元素是不可变对象,我们怎么更新已渲染的元素呢?
更新已渲染的元素的唯一方式就是创建一个全新的元素,并将其传入ReactDOM.render()
demo
import React from "react";
import ReactDOM from "react-dom";
function tick(){
const element = <div>
<h1>更新已渲染的元素</h1>
<h2>it is {new Date().toLocaleTimeString()}</h2>
</div>;
console.log(element);
ReactDOM.render(element,document.getElementById("update-dom"))
}
//tick()
setInterval(tick,1000)
当我们运行上面代码时候,我们观察到结果,可以看出React只更新他需要更新的部分上述代码中只更新了文本,这是因为React DOM会将元素和它的子元素与他们之前的状态进行比较,就是虚拟DOM的diff算法,并只会进行必要
的更新来使DOM达到预期的状态
尽管每一秒都会新建一个描述整个UI的UI的元素,React DOM只会更新实际改变了的内容,也就是上述代码中的文本节点