React高阶组件（HOC）使用困惑：未调用render却返回组件的原理

Great question—this is such a common "aha!" moment when first wrapping your head around Higher-Order Components (HOCs) in React. Let’s break this down step by step:

First, let’s clarify what withSubscription actually returns: it gives you a full React component class (not a rendered DOM element, or a one-off function result). Look at the code again—this returned class has all the standard React component features: a constructor, lifecycle methods (componentDidMount, componentWillUnmount), and crucially, its own render method already defined.

Here’s the key point: React automatically handles calling render() for any component you use in JSX.

When you do something like:

const EnhancedComponent = withSubscription(MyOriginalComponent, mySelectDataFunction);

You’re not executing a render—you’re creating a new component type. Think of it like building a custom component that just happens to have subscription logic baked right in.

Then, when you use this enhanced component in your app’s component tree (e.g., <EnhancedComponent someProp="value" />), React does what it always does:

1. Creates an instance of the enhanced component class
2. Runs the constructor to set up initial state
3. Triggers lifecycle methods like componentDidMount (which sets up the subscription in your example)
4. Automatically calls the component’s render method—which in turn renders your original WrappedComponent with fresh data and all passed-through props

You never need to call render() manually because React’s rendering engine manages the entire process. The HOC just gives you a pre-configured component that fits perfectly into React’s existing workflow.

To put it simply: the HOC is like a factory that builds you a new component with extra superpowers. Once you have that component, you use it just like any other React component—and React takes care of the rest, including calling render when it needs to.

内容的提问来源于stack exchange，提问作者Mir