当前位置：首页 > React

react状态实现事件

2026-01-27 02:40:49React

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>
  );
}

react状态实现事件