当前位置：首页 > React

react如何扩展组件功能

2026-03-11 08:16:43React

使用高阶组件（HOC）

高阶组件是一种函数，接收一个组件并返回一个新组件。通过HOC可以复用逻辑，例如添加props、处理生命周期或注入状态。

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

使用自定义Hook

React Hook允许在不修改组件结构的情况下复用状态逻辑。自定义Hook可以提取通用逻辑，供多个组件调用。

react如何扩展组件功能

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  const toggle = () => setValue(!value);
  return [value, toggle];
}
function MyComponent() {
  const [isOn, toggleIsOn] = useToggle();
  return <button onClick={toggleIsOn}>{isOn ? 'ON' : 'OFF'}</button>;
}

组合组件模式

通过children或props传递组件，实现功能组合。适用于UI和逻辑分离的场景。

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

使用Render Props

通过props传递渲染函数，动态决定组件内容。适用于逻辑高度可定制的场景。

react如何扩展组件功能

class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };
  handleMouseMove = (e) => this.setState({ x: e.clientX, y: e.clientY });
  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}
function App() {
  return <MouseTracker render={({ x, y }) => <div>Mouse at {x}, {y}</div>} />;
}

使用Context API

通过Context跨层级传递数据，避免props逐层传递。适用于全局状态或主题配置。

const ThemeContext = React.createContext('light');
function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={theme}>Click</button>}
    </ThemeContext.Consumer>
  );
}
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

使用复合组件

通过多个子组件协同工作，共享隐式状态。例如<Select>和<Option>的组合。

const Select = ({ children }) => {
  const [value, setValue] = useState(null);
  return React.Children.map(children, child =>
    React.cloneElement(child, { value, setValue })
  );
};
const Option = ({ value, setValue, children }) => (
  <div onClick={() => setValue(value)}>{children}</div>
);
function App() {
  return (
    <Select>
      <Option value="1">Option 1</Option>
      <Option value="2">Option 2</Option>
    </Select>
  );
}