React.js：将一个组件包装到另一个组件中

Question

许多模板语言都有“slots”或“yield”语句，允许进行某种控制反转以将一个模板包装在另一个模板中。

Angular 有“transclude”选项。

Rails 有yield 声明。 如果 React.js 有 yield 语句，它看起来像这样：

var Wrapper = React.createClass({
  render: function() {
    return (
      <div className="wrapper">
        before
          <yield/>
        after
      </div>
    );
  }
});

var Main = React.createClass({
  render: function() {
    return (
      <Wrapper><h1>content</h1></Wrapper>
    );
  }
});

期望的输出：

<div class="wrapper">
  before
    <h1>content</h1>
  after
</div>

唉，React.js 没有<yield/> 。 如何定义 Wrapper 组件以实现相同的输出？

Answer 1

尝试：

var Wrapper = React.createClass({
  render: function() {
    return (
      <div className="wrapper">
        before
          {this.props.children}
        after
      </div>
    );
  }
});

有关更多信息，请参阅文档中的多个组件：子项和 子项道具的类型。

Answer 2

使用children

const Wrapper = ({children}) => (
  <div>
    <div>header</div>
    <div>{children}</div>
    <div>footer</div>
  </div>
);

const App = ({name}) => <div>Hello {name}</div>;

const WrappedApp = ({name}) => (
  <Wrapper>
    <App name={name}/>
  </Wrapper>
);

render(<WrappedApp name="toto"/>,node);

这在 Angular 中也称为transclusion 。

children是 React 中的一个特殊道具，它将包含组件标签内的内容（这里<App name={name}/>在Wrapper ，所以它是children

请注意，您不一定需要使用children ，这对于组件来说是唯一的，如果需要，您也可以使用普通的 props，或者混合 props 和 children：

const AppLayout = ({header,footer,children}) => (
  <div className="app">
    <div className="header">{header}</div>
    <div className="body">{children}</div>
    <div className="footer">{footer}</div>
  </div>
);

const appElement = (
  <AppLayout 
    header={<div>header</div>}
    footer={<div>footer</div>}
  >
    <div>body</div>
  </AppLayout>
);

render(appElement,node);

这对于许多用例来说既简单又好，我建议大多数消费者应用程序使用它。

---

渲染道具

可以将渲染函数传递给组件，这种模式通常称为render prop ，并且children prop 通常用于提供该回调。

这种模式并不真正用于布局。 包装器组件通常用于保存和管理某些状态并将其注入到其渲染函数中。

反例：

const Counter = () => (
  <State initial={0}>
    {(val, set) => (
      <div onClick={() => set(val + 1)}>  
        clicked {val} times
      </div>
    )}
  </State>
); 

你可以变得更花哨，甚至可以提供一个对象

<Promise promise={somePromise}>
  {{
    loading: () => <div>...</div>,
    success: (data) => <div>{data.something}</div>,
    error: (e) => <div>{e.message}</div>,
  }}
</Promise>

请注意，您不一定需要使用children ，这是品味/API 的问题。

<Promise 
  promise={somePromise}
  renderLoading={() => <div>...</div>}
  renderSuccess={(data) => <div>{data.something}</div>}
  renderError={(e) => <div>{e.message}</div>}
/>

截至今天，许多库都在使用渲染道具（React context、React-motion、Apollo...），因为人们倾向于发现这个 API 比 HOC 更容易。 react-powerplug是一个简单的 render-prop 组件的集合。 react-adopt可帮助您进行组合。

---

高阶组件 (HOC)。

const wrapHOC = (WrappedComponent) => {
  class Wrapper extends React.PureComponent {
    render() {
      return (
        <div>
          <div>header</div>
          <div><WrappedComponent {...this.props}/></div>
          <div>footer</div>
        </div>
      );
    }  
  }
  return Wrapper;
}

const App = ({name}) => <div>Hello {name}</div>;

const WrappedApp = wrapHOC(App);

render(<WrappedApp name="toto"/>,node);

高阶组件 / HOC通常是一个函数，它接受一个组件并返回一个新组件。

使用高阶组件比使用children组件或render props性能更高，因为包装器可以使用shouldComponentUpdate提前一步缩短渲染。

这里我们使用PureComponent 。 重新渲染应用程序时，如果WrappedApp名称 prop 不随时间变化，则包装器可以说“我不需要渲染，因为 props（实际上，名称）与以前相同”。 使用上述基于children的解决方案，即使包装器是PureComponent ，也不是这种情况，因为每次父级渲染时都会重新创建子元素，这意味着即使包装的组件是纯的，包装器也可能总是重新渲染。 有一个babel 插件可以帮助缓解这种情况并确保随着时间的推移保持恒定的children元素。

---

结论

高阶组件可以为您提供更好的性能。 它并没有那么复杂，但一开始看起来肯定不友好。

阅读本文后，不要将整个代码库迁移到 HOC。 请记住，在您的应用程序的关键路径上，出于性能原因，您可能希望使用 HOC 而不是运行时包装器，特别是如果多次使用相同的包装器，则值得考虑将其设为 HOC。

Redux 最初使用运行时包装器<Connect> ，后来出于性能原因切换到 HOC connect(options)(Comp) （默认情况下，包装器是纯的并使用shouldComponentUpdate ）。 这是我想在这个答案中强调的内容的完美例证。

注意如果一个组件有render-prop API，通常很容易在它之上创建一个HOC，所以如果你是一个lib作者，你应该先写一个render prop API，最后提供一个HOC版本。 这就是 Apollo 对<Query>渲染道具组件以及使用它的graphql HOC graphql 。

就我个人而言，我两者都使用，但有疑问时我更喜欢 HOC，因为：

• 与渲染道具相比，组合它们（ compose(hoc1,hoc2)(Comp) ）更惯用
• 它可以给我更好的表现
• 我熟悉这种编程风格

我会毫不犹豫地使用/创建我最喜欢的工具的 HOC 版本：

• React 的Context.Consumer comp
• 未说明的Subscribe
• 使用 Apollo 的graphql HOC 而不是Query渲染道具

在我看来，渲染道具有时会使代码更具可读性，有时则更少……我尝试根据我的约束使用最实用的解决方案。 有时可读性比性能更重要，有时则不然。 明智地选择，不要拘泥于 2018 年将所有内容都转换为渲染道具的趋势。

Answer 3

除了 Sophie 的回答之外，我还发现了发送子组件类型的用途，执行如下操作：

var ListView = React.createClass({
    render: function() {
        var items = this.props.data.map(function(item) {
            return this.props.delegate({data:item});
        }.bind(this));
        return <ul>{items}</ul>;
    }
});

var ItemDelegate = React.createClass({
    render: function() {
        return <li>{this.props.data}</li>
    }
});

var Wrapper = React.createClass({    
    render: function() {
        return <ListView delegate={ItemDelegate} data={someListOfData} />
    }
});