React.js组件复用的几种方式

在React.js开发中，组件的复用是提高代码质量和开发效率的关键。本文将介绍几种常见的React.js组件复用方式。

1. 使用Props传递数据

class Button extends React.Component {
  render() {
    return (
      <button>{this.props.label}</button>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <Button label="Click me!" />
      </div>
    );
  }
}

2. 使用Render Props模式

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0 };
  }

  handleMouseMove = (event) => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  }

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <Mouse render={mouse => (
          <p>Mouse position: {mouse.x}, {mouse.y}</p>
        )} />
      </div>
    );
  }
}

3. 使用Higher Order Components

const withLoading = (WrappedComponent) => {
  return class extends React.Component {
    render() {
      if (this.props.isLoading) {
        return <div>Loading...</div>;
      } else {
        return <WrappedComponent {...this.props} />;
      }
    }
  };
};

class App extends React.Component {
  render() {
    return (
      <div>
        <ComponentWithLoading isLoading={true} />
      </div>
    );
  }
}

const ComponentWithLoading = withLoading(Component);

4. 使用React Hooks

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  
  const increment = () => {
    setCount(count + 1);
  }
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Counter />
    </div>
  );
};

总结：

以上介绍的是几种常见的React.js组件复用方式，通过合适的方法可以提高代码的复用性和可维护性，从而加快开发效率。