useState

React useState Hook 允许我们跟踪功能组件中的状态

状态通常是指应用程序中需要跟踪的数据或属性。

导入 useState

要使用 useState Hook, 我们首先需要将它 import 到我们的组件中

// 在组件的顶部，导入 useState Hook
import { useState } from "react"

初始化 useState

我们通过在函数组件中调用 useState 来初始化我们的状态。

useState 接受一个初始状态并返回两个值：

• 当前状态
• 一个更新状态的函数

// 在 Function组件的顶部初始化状态
import { useState } from "react"

function FavoriteColor() {
  const [color, setColor] = useState("")
}

读取 State

我们现在可以在组件的任何地方包含我们的状态

实时编辑器

// 在呈现的组件中使用 state 变量 function FavoriteColor() { const [color, setColor] = useState("red") return <h1>My favorite color is {color}!</h1> } render(FavoriteColor)

// 在呈现的组件中使用 state 变量
function FavoriteColor() {
  const [color, setColor] = useState("red")
  return <h1>My favorite color is {color}!</h1>
}

render(FavoriteColor)

结果

Loading...

更新 State

为了更新我们的状态，我们使用我们的状态更新函数

实时编辑器

function FavoriteColor() { const [color, setColor] = useState("red") return ( <> <h1>My favorite color is {color}!</h1> <button type="button" onClick={() => setColor("blue")}> Blue </button> </> ) } render(<FavoriteColor />)

function FavoriteColor() {
  const [color, setColor] = useState("red")
  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button type="button" onClick={() => setColor("blue")}>
        Blue
      </button>
    </>
  )
}

render(<FavoriteColor />)

结果

Loading...

更新 Objects and Arrays in State

更新状态时，整个状态都会被覆盖

如果我们只想更新汽车的颜色怎么办？

如果我们只调用 setCar({color: "blue"})，这将从我们的状态中删除品牌、型号和年份

我们可以使用 JavaScript 扩展运算符来帮助我们

实时编辑器

function Car() { const [car, setCar] = useState({ brand: "Ford", model: "Mustang", year: "1964", color: "Red", }) const updateColor = () => { setCar((previousState) => { return { ...previousState, color: "Blue" } }) } return ( <> <h2>My {car.brand}</h2> <p> It is a {car.color} {car.model} from {car.year}. </p> <button className="uk-button uk-button-primary" type="button" onClick={updateColor} > Blue </button> </> ) } render(<Car />)

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "Red",
  })
  const updateColor = () => {
    setCar((previousState) => {
      return { ...previousState, color: "Blue" }
    })
  }
  return (
    <>
      <h2>My {car.brand}</h2>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        className="uk-button uk-button-primary"
        type="button"
        onClick={updateColor}
      >
        Blue
      </button>
    </>
  )
}

render(<Car />)

结果

Loading...