React之路-元素渲染

元素

元素是构成react应用的最小组成部分,就是在页面看的内容,React 元素是创建开销极小的普通对象。React DOM 会负责更新 DOM 来与 React 元素保持一致。

const element = <h1>Hello, world</h1>;

将元素渲染成页面的DOM

//将元素渲染成页面的DOM需要使用ReactDOM.render()
const element = <h1>页面需要展示的内容</h1>
ReactDOM.render(
    element,
    //这一步表示element挂载到页面上的具体位置
    document.getelementbyId("app")
})

更新已经渲染的元素

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性,所以想要更新元素就需要创建一个新的元素,并且使用ReactDOM.render()

//通过计时器每一秒执行一次getTime函数,重新渲染页面DOM,到达更新页面元素
function getTime() {
  const ele = (
    <div>
      <h2>当前时间 {new Date().toLocaleTimeString()}</h2>
    </div>
  );
  ReactDOM.render(ele, document.getElementById('root'));
}
setInterval(getTime, 1000);

react更新只会更新必要的DOM