react的useState

useState是 React 提供的一个Hook，用于在函数组件中声明和管理状态（数据）。
它让你在函数组件里拥有类似 class 组件的 this.state 功能。

基本用法

const [state, setState] = useState(初始值);

• state：当前的状态值
• setState：用来修改状态的函数

import React, { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0); // 初始值为0

return (
<button onClick={() => setCount(count + 1)}>
当前计数：{count}
</button>
);
}

• useState 可以存任何类型的数据：数字、字符串、对象、数组、布尔值、甚至函数。
• 每次调用 setState，组件会重新渲染，显示最新的状态。

例子：存对象

const [user, setUser] = useState({ name: '张三', age: 18 });

例子：存数组

const [list, setList] = useState([1, 2, 3]);

 总结

• useState 是函数组件的“数据仓库”，可以存任何你想要的数据。
• 只要用 setState 修改，组件就会自动刷新显示最新数据。
• 这是 React Hooks 最基础、最常用的功能之一。

 

不能直接调用别的组件的 setState。
每个组件的 useState 和 setState 只属于自己组件内部，外部组件无法直接访问和修改

正确的做法

1. 父组件管理状态，子组件通过 props 传递和回调修改：

父组件

import React, { useState } from 'react';
import Child from './Child';

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

return (
<div>
<Child count={count} setCount={setCount} />
</div>
);
}

子组件

function Child({ count, setCount }) {
return (
<button onClick={() => setCount(count + 1)}>
子组件按钮：{count}
</button>
);
}

2. 全局状态管理（如 Redux、Context）
   如果多个组件需要共享和修改同一份数据，可以用 Redux 或 Context。