当前位置：首页 > React

react元素如何复用

2026-02-12 04:55:50React

React 元素复用的方法

在 React 中，复用元素可以通过多种方式实现，以下是几种常见的方法：

组件化

将重复的 UI 部分提取为独立的组件，通过 props 传递不同的数据或配置。这是 React 中最基础的复用方式。

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

// 复用 Button 组件
<Button text="Submit" onClick={handleSubmit} />
<Button text="Cancel" onClick={handleCancel} />

高阶组件 (HOC)

通过高阶组件包装现有组件，复用逻辑或行为。HOC 是一个函数，接收组件并返回增强后的新组件。

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

const EnhancedButton = withLogger(Button);

Render Props

通过 render props 模式，将组件的渲染逻辑委托给父组件，实现动态复用。

function DataFetcher({ render }) {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchData().then(setData);
  }, []);

  return render(data);
}

// 复用 DataFetcher
<DataFetcher render={data => <div>{data}</div>} />

自定义 Hook

将可复用的逻辑封装为自定义 Hook，供多个组件调用。自定义 Hook 可以包含状态和副作用。

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

// 复用 useCounter
function CounterA() {
  const { count, increment } = useCounter(0);
  return <button onClick={increment}>{count}</button>;
}

上下文 (Context)

通过 React Context 共享数据或状态，避免逐层传递 props，实现跨组件复用。

const ThemeContext = createContext('light');

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

function Toolbar() {
  return <Button />; // Button 可以访问 ThemeContext
}

组合模式

通过组件组合（composition）而非继承，将多个小组件组合为复杂 UI，提高复用性。

function Layout({ header, sidebar, content }) {
  return (
    <div>
      <div className="header">{header}</div>
      <div className="body">
        <div className="sidebar">{sidebar}</div>
        <div className="content">{content}</div>
      </div>
    </div>
  );
}

// 复用 Layout
<Layout
  header={<Header />}
  sidebar={<Sidebar />}
  content={<MainContent />}
/>