来看一下这个计时器的例子:

实例

function tick() {  const element = (    <div>      <h1>Hello, world!</h1>      <h2>现在是 {new Date().toLocaleTimeString()}.</h2>    </div>  );  ReactDOM.render(    element,    document.getElementById('example')  );} setInterval(tick, 1000);

尝试一下 »

以上实例通过 setInterval() 方法,每秒钟调用一次 ReactDOM.render()。

我们可以将要展示的部分封装起来,以下实例用一个函数来表示:

实例

function Clock(props) {  return (    <div>      <h1>Hello, world!</h1>      <h2>现在是 {props.date.toLocaleTimeString()}.</h2>    </div>  );} function tick() {  ReactDOM.render(    <Clock date={new Date()} />,    document.getElementById('example')  );} setInterval(tick, 1000);

尝试一下 »

除了函数外我们还可以创建一个 React.Component 的 ES6 类,该类封装了要展示的元素,需要注意的是在 render() 方法中,需要使用 this.props 替换 props

实例

class Clock extends React.Component {  render() {    return (      <div>        <h1>Hello, world!</h1>        <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2>      </div>    );  }} function tick() {  ReactDOM.render(    <Clock date={new Date()} />,    document.getElementById('example')  );} setInterval(tick, 1000);

尝试一下 »

React 只会更新必要的部分

值得注意的是 React DOM 首先会比较元素内容先后的不同,而在渲染过程中只会更新改变了的部分。