4 Rendering Elements

React中的原生 如何渲染到 屏幕上？

与浏览器不同 React 原生创建廉价，React DOM 负责更新DOM

1 在Dom中渲染一个元素

在index.html 中 有段代码

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

这个被称为root节点 它将有ReactDOM负责管理

渲染React element into root DOM node

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

2 更新React Element

react element 是不可变的，创建后 不能改变其子元素 和属性。

1 创建新element 使用 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);

后续有更好的方法