-1 
import React from "react"
import ReactDOM from "react-dom"
import "./styles.css"

function usePersistentValue(initialValue) {
  return React.useState({
    current: initialValue
  })[0]
}

function Counter() {
  const [count, setCount] = React.useState(0)
  const id = usePersistentValue(null)

  const clearInterval = () => window.clearInterval(id.current)

  React.useEffect(() => {
    id.current = window.setInterval(() => {
      setCount(c => c + 1)
    }, 1000)

    return clearInterval
  }, [])

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={clearInterval}>Stop</button>
    </div>
  )
}

const rootElement = document.getElementById("root")
ReactDOM.render(<Counter />, rootElement)

这里

function usePersistentValue(initialValue) {
      return React.useState({
        current: initialValue
      })[0]
    }

这似乎是一个函数调用，但后跟 [0] 对我来说毫无意义，尤其是 [0] 在这里做什么？它是有效的javascript还是反应的特殊语法？我最好的猜测是 [0] 值被分配给current属性，对吗？但我仍然困惑如何将数组值分配给current属性，请帮我解释语法谢谢

4

3 回答 3

2

[0]只是0从某个东西（通常是一个数组）中获取属性。

function return_an_array() {
    return ["foo", "bar"];
}

const result = return_an_array()[0];

console.log(result);

于 2020-11-10T15:18:08.757 回答
1

这与以下内容完全相同：

const [id] = useState({ current: null });

useState返回一个包含两个值的数组，即您使用且不更改的常量 state 值和用于更改 state的“set”函数。您可以在该行中看到一个“正常”示例const [count, setCount] = React.useState(0)

这段代码的奇怪之处在于，他们通过更改id稍后的内容来绕过规则，而没有实际调用函数来设置更新的状态。相反，他们通过隐藏在一个函数中将它扫到地毯下。

于 2020-11-10T15:32:28.417 回答
0

这样想

return ( React.useState({ current: initialValue })[0] )

（强调括号）

所以它首先评估React.useState({ current: initialValue })[0]——这将产生一些结果——这就是返回的内容。is 在not语句的[0]返回值上。.useStatereturn

于 2020-11-10T15:21:30.493 回答