react状态实现事件
React 状态与事件处理实现方式
状态管理基础
在 React 中，使用 useState hook 可以声明组件内部的状态变量。状态更新会触发组件重新渲染，确保 UI 与数据同步。事件处理函数通过 props 传递给子组件或直接在组件内定义。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return <button onClick={handleClick}>Clicked {count} times</button>;
}事件参数传递
事件处理函数可以接收 SyntheticEvent 对象，包含事件相关信息。需要阻止默认行为时调用 e.preventDefault()。
const handleSubmit = (e) => {
e.preventDefault();
console.log('Form submitted');
};状态提升模式 当多个组件需要共享状态时，将状态提升到最近的共同父组件，通过 props 向下传递数据和事件处理函数。
function Parent() {
const [sharedState, setSharedState] = useState('');
const handleChange = (value) => {
setSharedState(value);
};
return (
<>
<ChildA value={sharedState} onChange={handleChange} />
<ChildB value={sharedState} />
</>
);
}异步状态更新
使用函数式更新确保依赖前次状态的修改正确执行。对于复杂状态逻辑，可以考虑使用 useReducer。
const [data, setData] = useState([]);
const fetchData = async () => {
const res = await fetch('/api/data');
setData(await res.json());
};性能优化技巧
对于高频事件如滚动或输入，使用防抖/节流技术减少状态更新频率。避免在渲染函数中定义新函数，使用 useCallback 缓存事件处理器。
const memoizedHandler = useCallback(
() => { /* 逻辑 */ },
[dependencies]
);上下文与全局状态 跨组件层级传递事件处理器时，可通过 Context API 避免 prop drilling。大型应用建议采用状态管理库如 Redux 或 MobX。
const EventContext = createContext();
function App() {
const [event, setEvent] = useState(null);
return (
<EventContext.Provider value={{ event, setEvent }}>
<DeeplyNestedComponent />
</EventContext.Provider>
);
}
