当前位置：首页 > React

react如何实现逻辑复用

2026-01-24 09:16:02React

实现逻辑复用的方法

在React中，逻辑复用可以通过多种方式实现，每种方式适用于不同的场景。以下是常见的几种方法：

高阶组件（HOC）

高阶组件是一种函数，接收一个组件并返回一个新的组件。通过HOC可以将共享的逻辑提取到高阶组件中，然后将其应用到多个组件上。

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

const EnhancedComponent = withLogger(MyComponent);

自定义Hook

自定义Hook允许将组件逻辑提取到可重用的函数中。自定义Hook可以调用其他Hook，并且可以在多个组件中使用。

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}</button>;
}

Render Props

Render Props是一种通过组件的props传递渲染逻辑的技术。组件接收一个函数作为props，并在内部调用该函数来实现逻辑复用。

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>
    );
  }
}

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

组合组件

通过组合多个组件来实现逻辑复用。可以将共享的逻辑封装在一个父组件中，子组件通过props接收数据和行为。

function Toggle({ children }) {
  const [on, setOn] = useState(false);
  const toggle = () => setOn(!on);
  return children({ on, toggle });
}

<Toggle>
  {({ on, toggle }) => <button onClick={toggle}>{on ? 'ON' : 'OFF'}</button>}
</Toggle>

Context API

Context API可以跨组件树共享数据，避免通过props层层传递。适用于全局状态或主题等共享逻辑。

react如何实现逻辑复用

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

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

function Toolbar() {
  return <ThemedButton />;
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Button</button>;
}