React(update the UI的三種方法)

如何更新一個Clock元件的時間狀態

• 方法1:setInterval()

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);

缺陷:沒有把時間更新功能封裝至Clock體內。

• 方法2:利用props

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

缺陷: <Clock date={new Date()} />的形式不夠嚴密，我們希望Clock元件不向外暴露任何和時間狀態有關的介面。

• 方法3 利用state

components defined as classes have some additional features. Local state is exactly that: a feature available only to classes.

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);