React 的 hooks 中 useEffect 使用

Question

不使用

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({
        count: this.state.count + 1
      })
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.timer)
  }
  render() {
    return (
      <>
        <div>{this.state.count}</div>
      </>
    );
  }
}

使用

function Demo() {
  let [count, setCount] = useState(0)
  useEffect(() => {
    let timer = setInterval(() => {
      setCount(count + 1)
    }, 1000);
    return () => {
      clearInterval(timer)
    }
  })
  return (
    <>
      <div>{count}</div>
    </>
  );
}

清除副作用和跳过更新

function Demo() {
  let [count, setCount] = useState(0)
  useEffect(() => {
    setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
  }, [])
  return (
    <>
      <div>{count}</div>
    </>
  );
}