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均使用靜態合成。

盡管渲染道具沒有上述問題，因為它使用動態合成，因此不會發生名稱沖突。

有關更多信息，請檢查下面提到的鏈接。

在這里檢查