React笔记：useState

1 介绍

useState 是 React 中一个非常重要的钩子（Hook），允许在函数组件中添加状态。

2 基本用法

• useState 是一个函数，它接收一个参数（初始状态值）并返回一个数组。
  • 返回的这个数组包含两个元素：当前的状态值和一个允许我们更新这个状态值的函数

2.1 用法举例

使用前端笔记：Create React App 初始化项目的几个关键文件解读-CSDN博客一样初始化的react程序，稍微修改一下App.js

import logo from './logo.svg';
import './App.css';

/
//新加的（开始）
import React, { useState } from 'react';

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

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}
//新加的（结束）
/

function App() {
  return (
    

      

        

        {/*新加了底下这一行*/}

		
        

          Edit src/App.js and save to reload.
        
        
          Learn React
        
      
    
  );
}

export default App;

2.1.1 效果展示

每点一下”Click me' 计数器+1

2.1.2 详细分析改动

主要改动是这一块：

import React, { useState } from 'react';

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

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}

• useState(0) 初始化 count 状态变量的值为 0。
• setCount 是一个函数，用于更新 count 的值。
• 当按钮被点击（onClick被点击）时，setCount(count + 1) 被调用，更新 count 的值并重新渲染组件。