ReactでsetInterval使用で定期描画する

reactでsetIntervalを使って定期的な描画を行う。

調べたところ、コンポーネントをクラスで定義するか関数で定義するかで方法が異なるようだ。

クラス定義の場合

メソッドとして、componentDidMount()とcomponentWillUnmount()を実装しておけばいいようだ。前者でsetInterval()を行い、IDを保持しておく。そして、後者でclearInterval()を行なって、保持していたIDを指定することでタスクを終了させる。React.Componentのライフサイクルなどを調べるとよくわかる。

• DidMount参考: React.Component – React
• WillUnmount参考: React.Component – React

Clock with Reactで実装。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      now: new Date(),
    };
  }
  componentDidMount() {
    this.intervalId = setInterval(()=>{
      this.setState({
        now: new Date(),
      });
    }, 1000);
  }
  componentWillUnmount(){
    clearInterval(this.intervalId);
  }
  render () {
    return (
      <div>{this.state.now.toString()}</div>
    )
  }
}

ReactDOM.render(<Clock />, document.getElementById("app"));

関数定義の場合

React16.8からの機能のフックを使って状態を管理できる。useState()とuseEffect()を使う。

参考

• Using the State Hook – React
• Using the Effect Hook – React

const [value, setValue] = useState(init)は引数を初期値として、クラスでいうthis.state.valueをvalueとして取り出すようなことができる。また、setValueは新しい状態として登録できる関数。setValue(newValue)で次にuseStateが呼ばれた時にその値がvalueとして返されるようになる。

Clock with Reactで実装。

function Clock(props) {
  const [now, setNow] = React.useState(new Date());
  React.useEffect(function() {
    const intervalId = setInterval(function() {
      setNow(new Date());
    }, 1000);
    return function(){clearInterval(intervalId)};
  }, [now]);
  return (
    <div>{now.toString()}</div>
   );
}

ReactDOM.render(<Clock />, document.getElementById("app"));

どちらもほぼ同じだが、クラスで定義する方が多いので前者の実装を使う。 使い捨てや小規模もしくは管理が整っているなら関数定義でもいいだろう。