Note·React Hook 定时器

作者 : jamin 本文共2816个字,预计阅读时间需要8分钟 发布时间: 2022-11-22 共1147人阅读

前段时间学习了 React 新发布的 Hook 新功能,学完立马就爱上了这个新 API,用起来感觉比 class 组件爽多了。但 hook 虽然看似简单,但是要能熟练运用还是得花上一段时间。

随机间隔计数器

目标:实现一个计数器,通过输入框输入计数器每次计数的时间(ms),按输入的时间间隔每次增一

class 版本

如果熟悉 React class 组件模式,这个功能实现不难。但是这样有两个弊端:

  1. 会有大量模板代码,我们不得不通过多个生命周期来实现一个功能
  2. 同一个功能逻辑代码却分布在不同地方,比如创建定时器和清除定时器放在两个不同的生命周期
import React from 'react'

class ClassVersion extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
      delay: 1000
    }
  }

  componentDidMount() {
    this.timer = setInterval(this.tick, this.state.delay)
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.delay !== this.state.delay) {
      clearInterval(this.timer)
      this.timer = setInterval(this.tick, this.state.delay)
    }
  }

  componentWillUnmount() {
    clearInterval(this.timer)
  }

  handelDelayChange = e => {
    this.setState({
      delay: +e.target.value
    })
  }

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

  render() {
    const { count, delay } = this.state

    return (
      <>
        <h1>Class 版本定时器</h1>
        <Input onChange={this.handelDelayChange} defaultValue={delay} />
        <div>
          Count: {count} Delay: {delay}ms
        </div>
      </>
    )
  }
}

Hook 版本

通过 Hook 实现计数器,代码更加已读,而且功能逻辑代码集中,创建计数器和清空计数器的代码集中一起。

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

function HookVersion() {
  const [count, setCount] = useState(0)
  const [delay, setDelay] = useState(1000)

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(c => c + 1)
    }, delay)
    return () => clearInterval(timer)
  }, [delay])

  const handelDelayChange = e => setDelay(+e.target.value)

  return (
    <>
      <h1>Hook 版本定时器</h1>
      <Input onChange={handelDelayChange} defaultValue={delay} />
      <div>
        Count: {count} Delay: {delay}ms
      </div>
    </>
  )
}

上面的 Hook 代码能够正常运行,可以注意到我们在每次计数器新增的时候调用的是 setCount(c => c + 1),传入的参数是一个函数 c => c + 1,也就是接收之前的值然后每次增一,而不是 setCount(count + 1),可以明确的是如果传入 count + 1 是无法正常工作的,count 会被固定为 0,所以计数器增加到 1 的时候就是停止不动,每次都是计数为 1。

count 被固定的原因是在 delay 不发生改变的情况下 effect 并不会重复执行,定时器每次 setCount 读取到的都是初始值。

虽然通过传入函数而不是固定值可以解决 count 被固定的问题,但是却无法读取每次渲染时期的 props。如何解决呢?可以通过在每次计数的时候不改变定时器,但是动态指向定时器的回调。

useRef() 返回了一个字面量,持有一个可变的 current 属性,在每一次渲染之间共享。可以将 Ref Hook 看作是一个容器,.current 属性可以指向任何值,类似于 class 组件的 this。通过使用 ref 来保存每次定时器回调函数。

React 组件的 props 和 state 会变化时,都会被重新渲染,并且把之前的渲染结果“忘记”的一干二净。两次渲染之间,是互不相干的。

useEffect() Hook 同样会“遗忘”之前的结果。它清理上一个 effect 并且设置新的 effect。新的 effect 获取到了新的 props 和 state。

但是 setInterval() 不会 “忘记”。 它会一直引用着旧的 props 和 state,除非把它换了。但是只要把它换了,就不得不重新设置时间。

但是通过 ref 我们可以做到只更换定时器的回调而不改变定时器的时间:

  1. 设置计时器 setInterval(fn, delay),其中 fn 调用 cb 回调。
  2. 第一次渲染,设置回调为 cb1
  3. 第二次渲染,设置回调为 cb2
import React, { useState, useEffect, useRef } from 'react'

function HookVersion() {
  const [count, setCount] = useState(0)
  const [delay, setDelay] = useState(1000)

  useInterval(() => {
    setCount(count + 1)
  }, delay)

  function handelDelayChange(e) {
    setDelay(+e.target.value)
  }

  return (
    <>
      <h1>Hook 版本定时器</h1>
      <Input onChange={handelDelayChange} defaultValue={delay} />
      <div>
        Count: {count} Delay: {delay}ms
      </div>
    </>
  )
}

function useInterval(cb, delay) {
  const ref = useRef()

  useEffect(() => {
    ref.current = cb
  })

  useEffect(() => {
    const timer = setInterval(() => ref.current(), delay)
    return () => clearInterval(timer)
  }, [delay])
}

这里获取提取出可复用的定时器 Hook 会更加优雅,而且 useIntervalsetInterval 使用方式一样:

setInterval(fn, delay)

useInterval(fn, delay)
本站所提供的部分资源来自于网络,版权争议与本站无关,版权归原创者所有!仅限用于学习和研究目的,不得将上述内容资源用于商业或者非法用途,否则,一切后果请用户自负。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源。如果上述内容资对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本站不保证所提供下载的资源的准确性、安全性和完整性,源码仅供下载学习之用!如用于商业或者非法用途,与本站无关,一切后果请用户自负!本站也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。如有侵权、不妥之处,请联系站长以便删除!
金点网络 » Note·React Hook 定时器

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
是否提供免费更新服务?
持续更新,永久免费
是否经过安全检测?
安全无毒,放心食用

提供最优质的资源集合

立即加入 友好社区
×