理解被高阶组件包装的React组件的props注入逻辑

这两个疑惑本质是对React高阶组件（HOC）的运行机制不熟悉导致的，具体解答如下：

问题1解答 #

withFirebaseAuth是标准的高阶组件，它返回的新组件本质是原App组件的外层包裹容器。当这个外层容器组件被渲染时，会在内部把处理好的user、signOut、signInWithGoogle等属性作为props，传递给它内部渲染的原App组件实例。整个过程既没有修改原App类的定义，也没有给原App本身挂载静态属性，你在App的render里拿到的this.props新增成员，是外层HOC组件在运行时传递给App实例的参数，并非提前绑定在App类上。

问题2解答 #

App类里的render方法是组件实例被渲染时才会执行的实例方法，不会在代码定义阶段就运行。你最终导出的是被HOC包裹后的新组件，当这个新组件在项目其他地方被调用渲染时，HOC会先完成firebase auth的初始化逻辑，把需要传递的props准备妥当后，再实例化并渲染原App组件。此时render方法才会执行，this.props已经拿到了HOC传入的所有属性，自然不会是undefined。

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