React Hooks学习篇-useState

最新推荐文章于 2025-12-06 17:59:54 发布

原创最新推荐文章于 2025-12-06 17:59:54 发布 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

本文介绍了React中的类组件和函数组件，并重点讲解了如何在函数组件中使用useState Hook进行状态管理。useState是一个让函数组件拥有状态的Hook，解决了函数组件无法直接管理状态的问题。示例代码展示了如何声明和更新不同类型的state变量，包括单一状态、多个状态的声明和修改。同时，文中强调了更新state变量只能通过对应的设置函数进行。

类组件

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
}

函数组件

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量
  const [count, setCount] = useState(0);
}

useState

类组件是由"有状态"的组件,而函数组件时"无状态"的组件;

useState 是允许你在 React 函数组件中添加 state 的 Hook。

useState 解决了函数组件没有状态的问题.

function ExampleWithManyStates() {
  // 声明多个 state 变量
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: '学习 Hook' }]);
}