当前位置：首页 > React

react委派实现

2026-01-26 14:59:28React

React 委派实现

在 React 中，委派（Delegation）通常指将某些功能或事件处理逻辑委托给父组件或其他组件处理。这种模式有助于减少代码重复，提高组件复用性。以下是几种常见的委派实现方式：

事件委派

通过将事件处理逻辑提升到父组件，子组件仅负责触发事件：

// 父组件
function Parent() {
  const handleClick = (childId) => {
    console.log(`Child ${childId} clicked`);
  };

  return (
    <div>
      <Child id={1} onClick={handleClick} />
      <Child id={2} onClick={handleClick} />
    </div>
  );
}

// 子组件
function Child({ id, onClick }) {
  return <button onClick={() => onClick(id)}>Click Me</button>;
}

渲染委派

通过 children 或 render props 将渲染逻辑委派给父组件：

// 容器组件
function List({ data, renderItem }) {
  return <ul>{data.map((item) => renderItem(item))}</ul>;
}

// 使用方式
<List
  data={[1, 2, 3]}
  renderItem={(item) => <li key={item}>{item}</li>}
/>

状态管理委派

通过 Context API 或状态管理库（如 Redux）将状态管理委派给全局存储：

const ThemeContext = createContext('light');

// 提供者组件
function App() {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 消费者组件
function Toolbar() {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <button onClick={() => setTheme('dark')}>
      Current Theme: {theme}
    </button>
  );
}

高阶组件（HOC）委派

通过高阶组件将通用逻辑委派给包装组件：

react委派实现

function withLogging(WrappedComponent) {
  return function(props) {
    useEffect(() => {
      console.log('Component mounted');
      return () => console.log('Component unmounted');
    }, []);
    return <WrappedComponent {...props} />;
  };
}

const EnhancedComponent = withLogging(MyComponent);

这些模式可以根据具体场景组合使用，以实现更灵活的组件架构。

标签: react