React学习(4)-渲染元素

在React App里面，最小的构建单位就是元素。

一、将元素渲染到DOM里去

假设我们在HTML里面有个div：

<div id="root"></div>

然后我们调用ReactDOM.render()来把一个元素渲染到这个div里面去：

const element = <h1>hello </h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

二、更新已渲染的元素

React里面的元素，是不可改变的。一旦创建了元素，就不能改变它的属性和子元素。
唯一可以更新UI的操作，那就是再创建一个新的元素，然后扔给ReactDOM.render()，再去渲染一遍。

function tick() {
  const element = (
    <div>
      <h1>Hello world. </h1>
      <h2>It is {new Date().toLocaleTimeString() }. </h2>
    </div>
  );
  ReactDOM.render(
    element,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

上述代码，一执行，这个Hello world下面的时间就开始走了。

image.png

三、只更新需要更新的部分

虽然ReactDOM.render()是把整个元素重新渲染了一遍，但并不表示它是完全从头开始干活。为了提高效率，避免页面闪烁，它还是用最小的代价来更新渲染的。从chrome浏览器的审查里面我们可以看到，上面的页面啊，只更新了一个时间，其他都没动。

image.png