踩坑日记，react在纯函数组件中写定时器(推荐useRef)

在你使用react hooks的时候，可能会遇到使用计时器或定时器的需求，那么我们在清楚定时器时常常需要一个变量，有时候我们会这样写

import React, { useEffect } from 'react'
import { Button } from 'antd'

const App = () => {

  let timer

  useEffect(() => {
    timer =setInterval(() => {
      console.log('触发了')
    }, 1000)
  },[])

  const clearTimer = () => {
    clearInterval(timer)
  }

  return (
    <>
      <Button onClick={clearTimer}>停止计时</Button>
      <div>这是一个纯函数组件</div>
    </>)
}
export default App

我们在纯函数的全局作用域内定义了一个变量，用来存放定时任务，通常情况下我也是这么做的，但是react hooks 中给我们提供了useRef这样的hooks，使用他将让我们的代码变得而更加优雅（显得牛逼）

使用useRef

我们先来看一下官网对这个hooks的说明，实际上，我要写这篇踩坑日记，是因为我没有好好看文档，不知道这个hooks，当我知道了以后，简直是恍然大悟。

useRef.png
可以看到哈，和传统的ref概念不同，它不但能用来存放组件的实例，在useRef中，他变成了一个可以存放任意值的的“容易”，并且不会随着组件的更新而变化，这样我们在存放一个“固定的变量”的时候，就显得很有用。
我们再来看一下其用来存放实例之外的任意值的demo,也是一个官网截图
refcurrent.png
这个demo中，也是为我们举例设置一个定时任务，当然，我们还是要自己实现的，先来看看是怎么使用useref存放任意值的
在const intervalRef = useRef()之后，我们就相当于获取了这个容易，我们可以给其current总存任何值，并读取。好了，上自己的代码吧

import React, { useEffect, useRef } from 'react'
import { Button } from 'antd'

const App = () => {

  const ref = useRef()

  useEffect(() => {
    const timer =setInterval(() => {
      console.log('触发了')
    }, 1000)
    ref.current = timer
  },[])

  const clearTimer = () => {
    clearInterval(ref.current)
  }

  return (
    <>
      <Button onClick={clearTimer}>停止计时</Button>
      <div>这是一个纯函数组件</div>
    </>)
}
export default App

我们推荐使用useref的形式，毕竟在react开发中,hooks是一种趋势，多多学学还是有好处滴，这篇文章是我的个人反思，我太长时间没有看文档了...