当前位置：首页 > React

react元素如何复用

2026-02-26 14:50:51React

React 元素复用的方法

在 React 中复用元素可以通过组件化、高阶组件、自定义 Hook 等多种方式实现。以下是一些常见的复用策略：

组件化 将重复的 UI 或逻辑封装为独立的组件，通过 props 传递不同的数据或配置。这是 React 中最基础的复用方式。

react元素如何复用

function Button({ text, onClick }) {
  return <button onClick={onClick}>{text}</button>;
}

// 复用 Button 组件
<Button text="Click Me" onClick={() => console.log('Clicked')} />
<Button text="Submit" onClick={submitForm} />

高阶组件 (HOC) 高阶组件是一个函数，接收一个组件并返回一个新的组件，用于复用组件逻辑。

function withLogging(WrappedComponent) {
  return function(props) {
    console.log('Rendered:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
}

const EnhancedButton = withLogging(Button);

自定义 Hook 将组件中的状态逻辑提取到可重用的函数中，适用于复用非 UI 的逻辑。

react元素如何复用

function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(count + 1);
  return { count, increment };
}

// 在多个组件中复用
function ComponentA() {
  const { count, increment } = useCounter(0);
  return <button onClick={increment}>Count: {count}</button>;
}

Render Props 通过一个函数 prop 来共享代码，允许动态决定渲染内容。

function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const handleMouseMove = (e) => setPosition({ x: e.clientX, y: e.clientY });
  return <div onMouseMove={handleMouseMove}>{render(position)}</div>;
}

// 复用 MouseTracker
<MouseTracker render={({ x, y }) => <div>Mouse at {x}, {y}</div>} />

Context API 通过 Context 共享全局状态或配置，避免逐层传递 props。

const ThemeContext = React.createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

// 在子组件中复用 Context
function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
}