点赞 + 关注 + 收藏 = 学会了

本文简介

在 React 中，响应式数据指的是数据发生变化时，界面会自动更新，保持 UI 与数据的一致性。实现这种机制的核心在于 React 的 组件状态（state）和 属性（props）。

本文先讲解 state 的基础用法。props 是父子组件通信时才用到，这个知识点留到下一节讲。

什么是状态（state）？

在 React 中，状态是指组件的动态数据，它可以随时间变化。例如，当你点击一个按钮时，组件的状态可能会更新，导致组件重新渲染以反映新的数据。

简单来说，我们只要写好 HTML 布局，并在需要展示动态数据的地方绑定一个 JS 变量，当变量的值发生变化后，React 就会自动帮我们修改 HTML 内容。

在 React 中要实现上述功能，需要使用 useState 方法。

如果只是使用和修改普通的变量，界面是不会有变化的。

下面这种做法是不具备响应性的

01.gif

import React from 'react'

function App() {

  let count = 10

  const handleClick = () => {
    count += 1
    console.log(count)
  }
  return (
    <div>
      <div>{count}</div>
      <button onClick={handleClick}>+1</button>
    </div>
  )
}

export default App

声明了一个 count 变量，并将它绑定到 HTML 模板里，点击按钮后在控制台可以看到 count 是有变化的，但页面并没有发生改变。

如果想页面的内容也跟着变量的变化而变化，需要使用 useState 方法。

useState 的基础用法

useState 是一个函数，它接收一个初始状态作为参数，并返回一个数组，这个数组包含两个元素：

  1. 当前的状态值。
  2. 用来更新状态的函数。

更新基础类型的状态

字符串、数字、布尔这些都属于基础数据类型。

给 useState(10) 传入一个初始值 10，它会返回一个数组，数组第一个参数就是这个初始值，第二个参数是修改这个值（第一个参数）的方法。

02.gif

import React, { useState } from 'react'

function App() {

  let [count, setCount] = useState(10)

  const handleClick = () => {
    setCount(count + 1)
  }
  return (
    <div>
      <div>{count}</div>
      <button onClick={handleClick}>+1</button>
    </div>
  )
}

export default App

也可以在一个方法里修改多个值。

03.gif

import React, { useState } from 'react'

function App() {
  const [name, setName] = useState('雷猴')
  const [age, setAge] = useState(25)

  const updateInfo = () => {
    setName('鲨鱼辣椒')
    setAge(28)
  }

  return (
    <div>
      <p>姓名：{name}</p>
      <p>年龄：{age}</p>
      <button onClick={updateInfo}>更新信息</button>
    </div>
  )
}

export default App

更新数组和对象的状态

数组和对象都是引用类型， 使用 JS 原生方法修改数组和对象的值并不会直接在视图中更新。useState 不会自动合并状态，需要手动更新数组和对象。

更新数组可以这么写。

04.gif

import React, { useState } from 'react'

function App() {
  const [items, setItems] = useState([1, 2, 3])

  const addItem = () => {
    setItems([...items, items.length + 1]) // 添加新元素到数组
  }

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>添加1项</button>
    </div>
  )
}

export default App

主要是 setItems([...items, items.length + 1]) 这句，通过 ...items 解构数组，再合并重新赋值。

更新对象可以这么写

05.gif

import React, { useState } from 'react'

function App() {
  const [user, setUser] = useState({ name: '雷猴', age: 25 })

  const updateName = () => {
    setUser({ ...user, name: '鲨鱼辣椒' }) // 更新对象中的某个属性
  }

  return (
    <div>
      <p>姓名：{user.name}</p>
      <p>年龄：{user.age}</p>
      <button onClick={updateName}>更新姓名</button>
    </div>
  )
}

export default App

简单来说，要修改数组和对象，不能直接修改原始值，最好复制一份出来修改，或者像上面的例子那样解构出来。

以上就是本文的全部内容啦，先初步了解一下 state 是什么东东。

下一讲会介绍 state 的一些注意事项。