不同于瀏覽器的 DOM 元素, React 元素是普通的對象苞冯,非常容易創(chuàng)建讼育。React DOM 會負責更新 DOM ,以匹配React元素
const element = <h1>Hello, world</h1>;
注意:元素不是組件付枫,他是構(gòu)成組件的材料。
渲染元素到dom
<script type='text/babel'>
const destination=document.querySelector('#app');
const ele=(<h1>hello</h1>);
ReactDOM.render(ele,destination);
</script>
更新已渲染的元素
<script type='text/babel'>
const destination=document.querySelector('#app');
function change() {
const ele=(
<div>
<h1>hello</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>);
ReactDOM.render(ele,destination);
}
setInterval(change,1000)
//以上代碼每隔 1 秒, 就會通過 setInterval() 回調(diào) ReactDOM.render() 方法來重新渲染元素驰怎。
</script>
實際上阐滩,大多數(shù) React 應用只會調(diào)用 ReactDOM.render() 一次。在接下來的章節(jié)中县忌,我們將學習如何將這些代碼封裝到有狀態(tài)的組件中掂榔。
React 只更新必需要更新的部分
- 即使我們我們每隔 1 秒都重建了整個元素, 但實際上 React DOM 只更新了修改過的文本節(jié)點.