如何从react组件中提取公共逻辑(但公共逻辑使用setState)

从React组件中提取公共逻辑可以通过以下几种方式实现：

使用高阶组件（Higher-Order Components，HOC）：HOC是一个函数，接受一个组件作为参数，并返回一个新的组件。通过将公共逻辑封装在HOC中，可以在多个组件中共享该逻辑。在HOC中可以使用setState来管理状态。例如，可以创建一个名为withCommonLogic的HOC，将公共逻辑封装在其中，并返回一个新的组件。

function withCommonLogic(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        // 公共逻辑使用的状态
      };
    }

    // 公共逻辑的其他方法

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

// 使用HOC包装组件
const MyComponent = withCommonLogic(MyComponent);

使用Render Props模式：Render Props是一种通过组件的props将逻辑共享给其他组件的技术。可以创建一个名为CommonLogic的组件，将公共逻辑封装在其中，并通过this.props.children将逻辑传递给其他组件。在CommonLogic组件中可以使用setState来管理状态。

class CommonLogic extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 公共逻辑使用的状态
    };
  }

  // 公共逻辑的其他方法

  render() {
    return this.props.children(this.state);
  }
}

// 使用Render Props模式共享逻辑
const MyComponent = () => (
  <CommonLogic>
    {state => (
      // 使用共享的逻辑和状态
    )}
  </CommonLogic>
);

无论是使用HOC还是Render Props模式，都可以将公共逻辑封装在一个单独的组件中，并在需要使用该逻辑的组件中进行复用。这样可以提高代码的可维护性和复用性。

腾讯云相关产品和产品介绍链接地址：