react页面中的数据如何改变

修改状态（State）

使用 useState Hook 声明状态变量和更新函数。直接调用更新函数传入新值即可触发重新渲染。

const [count, setCount] = useState(0);
setCount(count + 1); // 直接更新

使用回调更新状态

当新状态依赖旧状态时，传递回调函数确保获取最新值。

setCount(prevCount => prevCount + 1);

更新对象或数组

需创建新对象/数组而非直接修改原值，避免引用未变导致渲染不触发。

const [user, setUser] = useState({ name: 'Alice', age: 25 });
setUser({ ...user, age: 26 }); // 展开运算符复制对象

副作用更新（Effect）

通过 useEffect 在依赖项变化时执行数据更新。适合处理异步操作或副作用逻辑。

useEffect(() => {
  fetchData().then(data => setData(data));
}, [dependency]);

全局状态管理

复杂应用可使用 Context API 或 Redux 集中管理状态。通过 useContext 或 dispatch 触发更新。

const { state, dispatch } = useContext(MyContext);
dispatch({ type: 'UPDATE', payload: newData });

表单输入绑定

通过 onChange 事件动态更新输入框数据，使用状态保存当前值。

const [input, setInput] = useState('');
<input value={input} onChange={(e) => setInput(e.target.value)} />

不可变数据原则

任何状态更新必须返回新引用。数组使用 map/filter，对象使用展开运算符或 Object.assign。

const [items, setItems] = useState([1, 2, 3]);
setItems([...items, 4]); // 添加新项