Javascript React-渲染内部HOCs-规则是否有例外？

我通过使用几个组件组合技术实现了一个发布/订阅模式：React.cloneElement和功能性的“组合组件”。我的目标是能够通过为组件分配一个“主题”属性，将组件动态注册到不同的数据流中

例如，此组件接收发布到HELLO_WORLD主题的所有数据：

 <MyComponent topic="HELLO_WORLD" />

订阅服务器从发布服务器获取其状态，发布服务器缓存主题：

const eventEmitter = new EventEmitter();

const publisher = {
  subscribe: function (eventName, cache) {
    eventEmitter.on(eventName, data => {
      this.cache[eventName] = cache(data);
    });
  },
  unsubscribe: function (eventName, fn) {
    eventEmitter.off(eventName, fn)
  },
  send: function (eventName, payload) {
    eventEmitter.emit(eventName, payload);
    if (!this.cache[eventName]) {
      this.cache[eventName] = { data: payload };
    }
  },
  getState: function (topic) {
    return this.cache[topic] || {};
  },
  cache: {}
}

组件探查器表明此设置渲染效率非常高。此外，状态将持久保存在React land之外的缓存中。如果你问我，它几乎只是一个扭曲的通量。你的想法？

你的

subscribe（）

不是一个真正的HOC

为什么?？（专注于粗体字）

• HOC是一个纯函数，它返回一个容器组件 包装原始组件

• subscribe（）

  只是包装组件 原始组件和返回

以下是详细的答案：

我在您的代码中没有看到任何HOC。请您指出？？HOC是一个纯函数，它接受组件作为输入，并通过将组件包装在容器组件中返回组件。我在你的代码中没有看到任何HOC。请指出？？MyComponent的render方法中显示的subscribe（）函数接受组件作为参数，并将其包装在订阅服务器组件中。

class MyComponent extends React.Component {
    render() {
        const { props: { otherProps, topic } } = this;
        return subscribe(({ data }) => {
            return <span>I am listening to the {topic} topic. Current state: {data}</span>
        }, topic)
    }
}

const subscribe = (Comp, topic) => {
  return (
    <Subscriber topic={topic}>
      <Comp />
    </Subscriber>
  );
};

class Subscriber extends Component {
    state = publisher.getState(this.props.topic) // get initial state

    onMessage = msg => {
        this.setState({ ...msg });
        return this.state;
    }

    componentDidMount() {
        this.subscription = publisher
            .subscribe(this.props.topic, this.onMessage);
    }
    
    componentWillUnmount() {
        publisher.unsubscribe(this.props.topic, this.onMessage);
    }

    render() {
        const {
            state: { data },
            props: { children }
        } = this;
        return Children.map(children, child =>
            cloneElement(child, { ...this.props, data })
        );
    }
}

const eventEmitter = new EventEmitter();

const publisher = {
  subscribe: function (eventName, cache) {
    eventEmitter.on(eventName, data => {
      this.cache[eventName] = cache(data);
    });
  },
  unsubscribe: function (eventName, fn) {
    eventEmitter.off(eventName, fn)
  },
  send: function (eventName, payload) {
    eventEmitter.emit(eventName, payload);
    if (!this.cache[eventName]) {
      this.cache[eventName] = { data: payload };
    }
  },
  getState: function (topic) {
    return this.cache[topic] || {};
  },
  cache: {}
}