React.js如何实现组件复用

在React.js中，组件复用可以通过以下几种方式实现：

1. 组件嵌套（Composition）: 将一个组件作为另一个组件的子组件来复用。例如，你可以创建一个通用的<Button>组件，并在多个其他组件中嵌套使用它。

function App() {
  return (
    <div>
      <ComponentA>
        <Button label="Click me" />
      </ComponentA>
      <ComponentB>
        <Button label="Submit" />
      </ComponentB>
    </div>
  );
}

2. 高阶组件（Higher-Order Components, HOCs）: 使用高阶组件可以将一个组件包裹起来，从而为其添加新的功能或属性。这种方式可以实现跨组件的逻辑复用。

function withLoadingIndicator(WrappedComponent) {
  return function EnhancedComponent(props) {
    const [isLoading, setIsLoading] = useState(false);

    // 一些加载逻辑

    return (
      <div>
        {isLoading && <p>Loading...</p>}
        <WrappedComponent {...props} />
      </div>
    );
  };
}

const MyComponentWithLoading = withLoadingIndicator(MyComponent);

3. Render Props: Render props是一种模式，通过将一个函数作为子组件传递给另一个组件，从而实现组件间的数据共享和逻辑复用。

class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        {this.props.render({ mouseX: 100, mouseY: 200 })}
      </div>
    );
  }
}

function App() {
  return (
    <MouseTracker
      render={({ mouseX, mouseY }) => (
        <h1>Mouse position: {mouseX}, {mouseY}</h1>
      )}
    />
  );
}

4. Hooks: 自React 16.8起，Hooks提供了一种在函数组件中使用状态和其他React特性的方法。通过自定义Hooks，可以实现逻辑复用。

function useCustomHook() {
  // 一些逻辑
  const [data, setData] = useState(null);

  return data;
}

function ComponentA() {
  const data = useCustomHook();
  // 使用数据渲染组件
}

function ComponentB() {
  const data = useCustomHook();
  // 使用数据渲染组件
}

通过以上方法，可以在React.js中实现组件的复用，提高代码的可维护性和可扩展性。