首页 > 解决方案 > react中方括号解构的概念理解

问题描述

import React, { useEffect, useState } from 'react'
import { Text } from 'react-native'

export default function Counter() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    const id = setInterval(() => setCount((count) => count + 1), 1000)

    return () => clearInterval(id)
  }, [])

  return <Text style={{ fontSize: 120 }}>{count}</Text>
}

那么 count 和 setCount 如何从 useState(0) 获取值

const [count, setCount] = useState(0)

你能像我五岁一样陪我度过这个困惑吗?

标签: javascriptreactjsdestructuring

解决方案


该函数useState返回一个包含两个值(有状态值和设置器)的数组。这样做是为了使单个函数调用可以一次返回两个值(JavaScript 作为一种语言不支持这一点——尽管其他语言确实支持这样的东西)。

例子:

function neighbors (num) {
  return [num - 1, num + 1]
}

const [seven, nine] = neighbors(8)

请参阅:https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#array_destructuring


推荐阅读