主页 / user-439648

Павел Белослудцев's questions

Martin Hope
Павел Белослудцев
Asked: 2022-04-18 19:23:05 +0000 UTC
  • 1

我用React写。当将useState钩子与setInterval函数结合使用时，我无法理解组件的状态会发生什么。我实现了预期的行为，但在草稿中我觉得我误解了一些东西。

我正在尝试实现的内容： 当指针每按一次 DOM 元素（比如 200，但没关系）ms 时，递增和递减存储在组件状态中的变量

我有 3 个代码选项，其中 2 个不能按预期工作，即当按下“+”时，变量的值不断变为 1 并立即变回 0。嗯，一个工作选项。

我意识到这可以使用 useEffect 钩子来实现，原则上我没有它就成功了，但问题是，为什么我的两个选项的行为不像我预期的那样，但其中一个仍然可以正常工作？

顺便说一句，选项 3 的性能，受限于选项 2 的不可操作性，让我非常惊讶，因为我一直认为这是等效的。

非工作选项#1：

const IndexPage = function () {
  const [count, setCount] = React.useState(0)
  const [id, setId] = React.useState(null)
  const delay = 200

  function inc() {
    let contextCount = count
    setId(setInterval(setCount, delay, count + 1))
  }

  function dec() {
    let contextCount = count
    setId(setInterval(setCount, delay, count - 1))
  }

  function clean() {
    clearInterval(id)
  }
  return (
    <Layout>
      <h1>{count}</h1>
      <p style={btn} onPointerDown={inc} onPointerUp={clean}>
        +
      </p>
      <p style={btn} onPointerDown={dec} onPointerUp={clean}>
        -
      </p>
    </Layout>
  )
}

export default IndexPage

非工作选项#2（仅更改功能）：

function inc() {
    let contextCount = count
    setId(
      setInterval(setCount, delay, ++contextCount)
    )
  }

  function dec() {
    let contextCount = count
    setId(
      setInterval(setCount, delay, --contextCount)
    )
  }

工作选项：

function inc() {
    let contextCount = count
    setId(
      setInterval(() => {
        setCount(++contextCount)
      }, delay)
    )
  }

  function dec() {
    let contextCount = count
    setId(
      setInterval(() => {
        setCount(--contextCount)
      }, delay)
    )
  }
setinterval