React HOC和render-props模式之间的区别？

Question

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

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

源代码： https : //codesandbox.io/s/n504v2njr4

渲染道具模式

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);

请帮我！。 感谢大伙们。

Answer 1

实际上，Mixin和HOC都存在一些问题，例如幻影状态和道具，如果在一个组件中使用多个Mixin和HOC，他们总是需要弄清楚谁在设置和传递道具和状态，-名称冲突是其中之一。更多知道的问题。 -Mixin和HOC均使用静态合成。

尽管渲染道具没有上述问题，因为它使用动态合成，因此不会发生名称冲突。

有关更多信息，请检查下面提到的链接。

在这里检查