Javascript React HOC和render props模式之间的区别是什么？

我刚刚学会了这两种模式。我对如何正确使用这些模式感到困惑

我创建了一个组件并尝试应用这些模式。一切都一样

源代码：

渲染道具图案 用法

高阶分量模式 用法

---

请帮帮我！。谢谢大家。

事实上，Mixin和HOC都有一些问题，比如ghost state和props，无论谁在一个组件中使用多个Mixin和HOC，他们总是需要弄清楚谁在设置和传递props和state， -名称冲突是另一个众所周知的问题。 -Mixin和HOC都使用静态组合

虽然渲染道具没有上述问题，因为它使用了动态合成，所以没有名称冲突

欲了解更多信息，请查看下面提到的链接

---

我想我应该发布一个答案，这样也许其他人可以参考相同的链接，请避免只链接的答案

class Toggle extends Component {
  state = {
    on: false,
  }

  onToggle = () => {
    this.setState(({ on }) => ({ on: !on}));
  }

  getStateHelper = () => ({
    on: this.state.on,
    toggle: this.onToggle,
  });

  render() {
    return this.props.children(this.getStateHelper())
  }
}

  <Toggle>
    {({on, toggle}) => (<button onClick={toggle}>{on ? 'On' : 'Off'}</button>)}
  </Toggle>

function ToggleHoc(Comp) {
  return class ToggleHocWrap extends Component {
    state = {
      on: false,
    }

    onToggle = () => {
      this.setState(({ on }) => ({ on: !on}));
    }

    getStateHelper = () => ({
      on: this.state.on,
      toggle: this.onToggle,
    });

    render() {
      return (<Comp {...this.getStateHelper()} />)
    }
  }
}

function TestToggle({ on, toggle }) {
  return (<button onClick={toggle}>{on ? 'On' : 'Off'}</button>)
}

const WithToggle = ToggleHoc(TestToggle);