React -在render中更新内容的适当方式

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    // 错误的做法：在render中更新状态
    this.setState({ count: this.state.count + 1 });
    return <div>{this.state.count}</div>;
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    // 正确的做法：在生命周期方法中更新状态
    this.timerID = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timerID = setInterval(() => setCount(c => c + 1), 1000);
    return () => clearInterval(timerID); // 清理函数
  }, []); // 空依赖数组意味着这个effect只在组件挂载和卸载时运行

  return <div>{count}</div>;
}