为什么“ this”的值保留在高阶组件中？ [重复]

Question

此问题已经在这里有了答案：

How does the “this” keyword work?（22个答案）

关闭2分钟前。

考虑以下高阶组件（从React文档中获取并“简化”：]

function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {
    state = {
      data: selectData(DataSource, props)
    };

   componentDidMount() {
     DataSource.addChangeListener(this.handleChange);
   }

   componentWillUnmount() {
     DataSource.removeChangeListener(this.handleChange);
   }

   handleChange = () => {
     this.setState({ data: selectData(DataSource, this.props) });
   }

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

在render方法中，WrappedComponent最初拥有的所有道具都由{... this.props}传递。但是，我仍然很难理解为什么会发生这种情况，因为（据我所知）新函数和类声明具有自己的this值。这意味着this关键字应该属于新返回的类，但是为什么不发生这种情况？

Answer 1

“ withSubscription”是“ HOC函数”，它将返回“ HOC增强组件”

EnhancedComponent = withSubscription(OriginalComponent);

[使用时，您将使用他的道具来实例化EnhancedComponent。这里的“ this”是EnhancedComponent上下文的“ this”。例如：

<EnhancedComponent p1="test1" p2="test2"/>

因此，在这种情况下，{... this.props}是EnhancedComponent的p1，p2，它们被传递给OriginalComponent。