三省吾身丶丶

三省吾身丶丶

马上订阅 三省吾身丶丶 RSS 更新: https://blog.guowenfh.com/atom.xml

从一个简单功能的实现，谈谈 react 中的逻辑复用进化过程

2019年9月17日 21:36

需求：我们现在有一个获取验证码的按钮，需要在点击后禁用，并且在按钮上显示倒计时60秒才可以进行第二次点击。
本篇文章通过对这个需求的八种实现方式来讨论在 react 中的逻辑复用的进化过程

代码例子放在了 codesandbox 上。

方案一 使用 setInterval

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import React from 'react'

export default class LoadingButtonInterval extends React.Component {
  state = {
    loading: false,
    btnText: '获取验证码',
    totalSecond: 10
  }
  timer = null
  componentWillUnmount() {
    this.clear()
  }
  clear = () => {
    clearInterval(this.timer)

    this.setState({
      loading: false,
      totalSecond: 10
    })
  }
  setTime = () => {
    this.timer = setInterval(() => {
      const { totalSecond } = this.state
      if (totalSecond <= 0) {
        this.clear()
        return
      }
      this.setState(() => ({
        totalSecond: totalSecond - 1
      }))
    }, 1000)
  }
  onFetch = () => {
    this.setState(() => ({ loading: true }))
    const { totalSecond } = this.state
    this.setState(() => ({
      totalSecond: totalSecond - 1
    }))
    this.setTime()
  }
  render() {
    const { loading, btnText,...
剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章