当前位置：首页 > React

react如何扩展组件功能

2026-01-24 23:26:23React

高阶组件（HOC）

高阶组件是一种函数，接收一个组件并返回一个新组件。通过包裹原始组件，可以注入额外的props或逻辑。适用于横切关注点（如权限控制、日志记录）。

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

自定义Hook

通过自定义Hook封装可复用的状态逻辑，供多个组件调用。适用于数据获取、表单处理等场景。

function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(count + 1);
  return { count, increment };
}
function MyComponent() {
  const { count, increment } = useCounter(0);
  return <button onClick={increment}>{count}</button>;
}

组合模式（Composition）

利用children或特定props将子组件/元素组合到父组件中。适用于UI布局或行为扩展。

function Card({ header, children }) {
  return (
    <div className="card">
      <div className="header">{header}</div>
      <div className="body">{children}</div>
    </div>
  );
}
// 使用
<Card header="Title">Content goes here</Card>

Render Props

通过函数prop动态决定渲染内容，实现逻辑与UI的解耦。适用于动态数据渲染。

function MouseTracker({ render }) {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  return render(position);
}
// 使用
<MouseTracker render={({ x, y }) => <div>Mouse at {x}, {y}</div>} />

上下文（Context）API

通过React.createContext共享全局数据，避免逐层传递props。适用于主题、用户身份等跨层级数据。

const ThemeContext = React.createContext('light');
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}
function Toolbar() {
  const theme = useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
}

组件继承（慎用）

通过类组件的extends继承父类功能，但React官方推荐组合优于继承。

class BaseComponent extends React.Component {
  baseMethod() { /* ... */ }
}
class ChildComponent extends BaseComponent {
  render() {
    this.baseMethod();
    return <div>Extended</div>;
  }
}

react如何扩展组件功能