为了方便后续理解,我们先来回顾总结一下前面几章的内容1.元素及其创建元素是构成一个React应用的最小的砖块。元素描述了您想在屏幕上看到的内容。constelement=
你好,世界
;与浏览器的DOM元素不同,React元素是创建开销最小的普通对象。ReactDOM将负责更新DOM以匹配React元素。我们使用React.createElement来创建React元素(语法也可以使用它的语法糖JSX)2.将元素渲染为DOM要将React元素渲染到指定的DOM节点中,只需将它们一起传递到ReactDOM中即可。render():constelement=
Hello,world
;ReactDOM.render(element,document.getElementById('root'));3更新UIReact元素是不可变对象。一旦创建,您就无法更改其子元素或属性。元素就像电影的单帧:它代表特定时刻的UI。据我们所知,更新UI的唯一方法是创建一个全新的元素并将其传递给ReactDOM.render()。考虑一个计时器示例:functiontick(){constelement=(
Hello,world!
它是{newDate().toLocaleTimeString()}。
分区>);ReactDOM.render(element,document.getElementById('root'));}setInterval(tick,1000);此示例将在setInterval()回调函数中每秒调用ReactDOM.render()。4React只更新它需要更新的部分ReactDOM将元素及其子元素与其之前的状态进行比较,并且只进行必要的更新以使DOM达到所需的状态。例如,在前面的计时器示例中,虽然每一秒我们都会创建一个描述整个UI树的新元素,但ReactDOM只会更新实际更改的内容,即示例中的文本节点。公众号【前端】问答