测开技能--Web开发 React 学习（四）元素的动态渲染

今天是第四篇，讲解元素的动态渲染，

React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

考虑一个计时器的例子：

我们修改app.js的文件，定时去刷新下界面，达到这个目的

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('exmple'));
}

setInterval(tick, 1000);

我们启动下我们的项目

npm start

我们看下，是否这样就可以满足呢。我们可以刷新下页面，就可以看到 打印 hello，然后呢，展示对应的时间。

时间是在改变的，这样就解决了不变的问题。

这个例子会在 setInterval() 回调函数，每秒都调用 ReactDOM.render()。

注意：

在实践中，大多数 React 应用只会调用一次 ReactDOM.render()。

我们采用了巧妙的方式，去解决这个问题，显然呢，这不是最优的解决的方案，在后续的章节中，我们将会讲述其他的方案，去解决这个问题。

我是雷子，一个热衷技术专研的人。

如果感觉文章对你有帮助，请点亮在看。