0Pricing
Next.js 15 Fullstack Web Apps · 课时

使用 Hooks 管理状态

学习使用 `useState` 和其他基本 React Hooks 管理组件专属数据。

使用 Hooks 管理状态 是 CoddyKit 上的免费 Next.js 15 Fullstack Web Apps 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Next.js 15 Fullstack Web Apps 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Intro to Component State

In React, state refers to data that a component manages internally and that can change over time, affecting how the component renders.

Think of it as a component's memory. When state changes, React efficiently updates only the necessary parts of your user interface.

Why State Matters

State is crucial for building interactive and dynamic web applications. Without it, your UI would be static and unable to respond to user actions.

  • User Input: Storing text from an input field.
  • Toggles: Managing whether a menu is open or closed.
  • Counters: Keeping track of a numerical value.

It makes your components 'alive'!

Meet the `useState` Hook

To add state to functional components in React, we use a special function called a Hook. The primary hook for managing local component state is useState.

Hooks are functions that let you 'hook into' React features like state and lifecycle methods from functional components.

Declaring State with `useState`

The useState hook returns an array with two items:

  1. The current state value.
  2. A function to update that state value.

We use array destructuring to get these values:

import React, { useState } from 'react';

function MyComponent() {
  // Declares a state variable 'count' initialized to 0
  // 'setCount' is the function to update 'count'
  const [count, setCount] = useState(0);

  // Declares a state variable 'name' initialized to an empty string
  const [name, setName] = useState('');

  return (
    <div>
      <p>Count: {count}</p>
      <p>Name: {name}</p>
    </div>
  );
}

Updating State: Simple Counter

To change the state, you must call the setter function (e.g., setCount). When you call this function, React will re-render your component with the new state value.

Try clicking the button to see the count change!

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1); // Update the state
  };

  return (
    <div>
      <p>Current Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

State Updates are Asynchronous

It's important to know that state updates in React are often asynchronous. This means React might batch multiple state updates for performance.

Because of this, if your new state depends on the previous state, it's safer to pass a function to the setter.

Functional State Updates

When updating state based on its previous value, provide a function to the setter. This function receives the previous state as an argument.

This pattern ensures you're always working with the most up-to-date state, preventing subtle bugs.

import React, { useState } from 'react';

function SafeCounter() {
  const [count, setCount] = useState(0);

  const incrementByTwo = () => {
    // This ensures we always increment based on the latest count
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementByTwo}>Add 2</button>
    </div>
  );
}

Managing User Input

useState is perfect for controlling form input elements. When an input's value is managed by React state, it's called a controlled component.

This gives you full control over the input's value and allows for easy validation or transformation.

Controlled Input Example

Here's how you can use useState to manage the value of a text input field. The onChange event handler updates the state every time the user types.

Type something into the box!

import React, { useState } from 'react';

function InputField() {
  const [text, setText] = useState('');

  const handleChange = (event) => {
    setText(event.target.value); // Update state with input's value
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>You typed: {text}</p>
    </div>
  );
}

Quick Check: `useState`

Which of the following statements about the useState hook in React are TRUE?

Recap: State with Hooks

You've now learned the core of state management in React using the useState hook!

  • What is State? Data that changes and affects component rendering.
  • useState: The primary hook to add state to functional components.
  • Syntax: const [value, setValue] = useState(initial);
  • Updating: Always use the setter function. For updates based on previous state, pass a function to the setter.
  • Use Cases: Counters, toggles, managing user input, and much more!

Mastering useState is a fundamental step in building interactive React apps.

常见问题解答

「使用 Hooks 管理状态」课时是免费的吗？

是的 — 「使用 Hooks 管理状态」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack Web Apps 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack Web Apps 课程共包含 4 节课。

「使用 Hooks 管理状态」这节课中我会学到什么？

学习使用 `useState` 和其他基本 React Hooks 管理组件专属数据。 你通过在浏览器中直接运行的动手代码来练习 Next.js 15 Fullstack Web Apps，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Next.js 15 Fullstack Web Apps 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack Web Apps 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。

「使用 Hooks 管理状态」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Next.js 15 Fullstack Web Apps 课中编写并运行代码吗？

能。每节 Next.js 15 Fullstack Web Apps 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. React 组件与 JSX
  2. 使用 Hooks 管理状态
  3. 属性与组件通信
  4. 渲染列表、键与条件式 UI
← 返回 Next.js 15 Fullstack Web Apps