当前位置：首页 > React

react元素如何复用

2026-01-24 00:54:42React

React 元素的复用方法

在 React 中，复用元素或组件是提高代码可维护性和开发效率的关键。以下是几种常见的复用方法：

组件化复用
将可复用的逻辑或 UI 封装为独立组件，通过 props 传递数据或行为。例如：

function Button({ text, onClick }) {
  return <button onClick={onClick}>{text}</button>;
}
// 复用
<Button text="Submit" onClick={handleSubmit} />

高阶组件（HOC）
通过函数包裹组件，复用逻辑（如鉴权、数据获取）：

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

Render Props
通过组件属性传递渲染逻辑，实现动态复用：

<DataProvider render={data => <Component data={data} />} />

自定义 Hook
提取状态逻辑到 Hook 中，供多个组件复用：

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

组合模式
通过 children 或特定 props 组合组件：

function Card({ header, children }) {
  return (
    <div className="card">
      {header && <div className="header">{header}</div>}
      <div className="body">{children}</div>
    </div>
  );
}
// 复用
<Card header="Title"><p>Content</p></Card>

Context API
跨层级复用数据或状态：

const ThemeContext = createContext('light');
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}
// 子组件通过 useContext(ThemeContext) 获取值

选择方法时需根据场景权衡：