React 组件抽离公共逻辑代码有哪些方式

React 组件抽离公共逻辑主要有以下几种方式：

1. 高阶组件（Higher-Order Components，HOCs）

高阶组件是一个接收组件并返回新组件的函数。它可以用于重用组件逻辑。

例子：

jsx
function withUserData(WrappedComponent) {
  return class extends React.Component {
    state = {
      user: null
    };

    componentDidMount() {
      // 假设 getUserData() 方法从某个服务获取用户数据
      getUserData().then(user => this.setState({ user }));
    }

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

// 使用高阶组件
const EnhancedComponent = withUserData(MyComponent);

2. Render Props

Render Props 是指以函数为子组件的这种模式，它允许我们的组件告诉其子组件需要渲染的内容。

例子：

jsx
class UserData extends React.Component {
  state = {
    user: null
  };

  componentDidMount() {
    // 同样假设 getUserData() 方法从某个服务获取用户数据
    getUserData().then(user => this.setState({ user }));
  }

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

// 使用 Render Props
<UserData render={user => user ? <MyComponent user={user} /> : <LoadingSpinner />} />

3. 自定义 Hooks

自定义 Hooks 允许你将组件逻辑提取到可重用的函数中。

例子：

jsx
function useUserData() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    getUserData().then(userData => setUser(userData));
  }, []);

  return user;
}

// 使用自定义 Hook
function MyComponent() {
  const user = useUserData();
  
  if (!user) {
    return <LoadingSpinner />;
  }

  return <Profile user={user} />;
}

4. Context API

Context API 允许你在组件树中直接传递数据，而不必在每个层级手动传递 props。

例子：

jsx
const UserContext = React.createContext();

// Context 提供者
class UserProvider extends React.Component {
  state = {
    user: null,
  };

  componentDidMount() {
    getUserData().then(user => this.setState({ user }));
  }

  render() {
    return (
      <UserContext.Provider value={this.state.user}>
        {this.props.children}
      </UserContext.Provider>
    );
  }
}

// Context 消费者
function MyComponent() {
  return (
    <UserContext.Consumer>
      {user => user ? <Profile user={user} /> : <LoadingSpinner />}
    </UserContext.Consumer>
  );
}

// 应用 Context
<UserProvider>
  <MyComponent />
</UserProvider>

5. 组件组合（Component Composition）

组件组合是 React 中一种基本的模式，它允许你将子组件传递给父组件，并在父组件中渲染。

例子：

jsx
function UserProfile({ user, children }) {
  return (
    <div>
      <Profile user={user} />
      {children}
    </div>
  );
}

function MyComponent() {
  const user = useUserData();
  
  return (
    <UserProfile user={user}>
      {/* 其他定制的子组件 */}
    </UserProfile>
  );
}

这些方法各有优劣，你可以根据具体场景和需求来选择最合适的方式来抽离和复用组件的逻辑。