React入门：编写带防抖节流的按钮组件

Posted 2021-08-31 hans774882968

用IDEA创建一个react-app项目，过程无任何疑点，略。目录结构和默认的一样，略。

配置eslint

IDEA会自动搜索eslint-plugin.js（不在项目里），如果

<路径>\\plugins\\javascriptLanguage\\languageService\\eslint\\bin\\eslint-plugin.js

报错，就把this.cliEngine = require(this.basicPath + "lib/cli-engine");改成this.cliEngine = require(this.basicPath + "lib/cli-engine").CLIEngine;但是这不是一劳永逸的，旧版本的项目还得改回去……

react项目默认无eslintrc文件，但默认已经npm install eslint。所以直接eslint --init创建eslintrc即可

修改默认端口

最简便的方法是安装cross-env。

npm install cross-env -g

然后package.json，把start的命令修改为

"scripts": {
  "start": "cross-env PORT=3030 react-scripts start",
  ……
}

参考：https://blog.csdn.net/qq_34362251/article/details/100882429

写代码

构造函数那里，对于onClick所调用的成员方法要加上：

this.debounce = this.debounce.bind(this)
this.throttle = this.throttle.bind(this)

只是为了保持this，因为onClick会丢失this。

防抖节流实现，背下来吧：

  // debounce已达到预期效果！
  debounce(f,time = 1000){
    let timer = null
    return () => {
      if(timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(f.bind(this),time)
    }
  }
  // throttle已达到预期效果！
  throttle(f,time = 1000){
    let timer = null
    return () => {
      if(timer) return
      timer = setTimeout(() => {
        f.apply(this)
        timer = null
      },time)
    }
  }

修改变量，不要直接赋值，应该使用this.setState

  updateVal1(){
    this.setState({
      val1: this.state.val1 + 1
    })
  }
  updateVal2(){
    this.setState({
      val2: this.state.val2 + 1
    })
  }

完整代码

Button.js

import React, {Component} from 'react'

class Button extends Component {
  constructor (props) {
    super(props)
    this.state = {
      val1: 0,
      val2: 0,
      test1: -1,
      test2: -2
    }
    this.debounce = this.debounce.bind(this)
    this.throttle = this.throttle.bind(this)
  }
  updateVal1 () {
    this.setState({
      val1: this.state.val1 + 1
    })
  }
  updateVal2 () {
    this.setState({
      val2: this.state.val2 + 1
    })
  }
  // debounce已达到预期效果！
  debounce (f,time = 1000) {
    let timer = null
    return () => {
      if(timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(f.bind(this),time)
    }
  }
  // throttle已达到预期效果！
  throttle (f,time = 1000) {
    let timer = null
    return () => {
      if(timer) return
      timer = setTimeout(() => {
        f.apply(this)
        timer = null
      },time)
    }
  }
  render () {
    return (
      <div>
        <button style={{margin: '10px'}} onClick={this.debounce(this.updateVal1)}>
          防抖：点击+1 | {this.state.val1}
        </button>
        <button style={{margin: '10px'}} onClick={this.throttle(this.updateVal2)}>
          节流：点击+1 | {this.state.val2}
        </button>
        <span style={{margin: '10px'}}>测试1：{this.state.test1}</span>
        <span style={{margin: '10px'}}>测试2：{this.state.test2}</span>
      </div>
    )
  }
}

export default Button

App.js

import React from 'react'
import './App.css'
import Button from './Button'

function App () {
  return (
    <div className="wsw">
      <Button/>
    </div>
  )
}

export default App