解释 React 中的组合模式| 附带解决方案的测验面试题

TL;DR

React 中的组合模式是一种通过组合更小、可复用的组件来构建组件的方式。React 鼓励使用组合来创建复杂的 UI，而不是使用继承。你可以将组件作为子组件或 props 传递给其他组件来实现这一点。例如：

function WelcomeDialog() {
  return (
    <Dialog>
      <h1>Welcome</h1>
      <p>Thank you for visiting our spacecraft!</p>
    </Dialog>
  );
}

function Dialog(props) {
  return <div className="dialog">{props.children}</div>;
}

React 中的组合模式

什么是组合？

组合是一种设计原则，它涉及组合更小、可复用的组件来构建更复杂的组件。在 React 中，这比继承更适合创建复杂的 UI。

如何在 React 中使用组合

将组件作为子组件传递

使用组合的一种常见方法是将组件作为子组件传递给其他组件。这允许你嵌套组件并创建一个层次结构。

function Dialog(props) {
  return <div className="dialog">{props.children}</div>;
}

function WelcomeDialog() {
  return (
    <Dialog>
      <h1>Welcome</h1>
      <p>Thank you for visiting our spacecraft!</p>
    </Dialog>
  );
}

将组件作为 props 传递

实现组合的另一种方法是将组件作为 props 传递。这允许更大的灵活性和自定义。

function SplitPane(props) {
  return (
    <div className="split-pane">
      <div className="split-pane-left">{props.left}</div>
      <div className="split-pane-right">{props.right}</div>
    </div>
  );
}

function App() {
  return <SplitPane left={<Contacts />} right={<Chat />} />;
}

组合的优点

可重用性：较小的组件可以在应用程序的不同部分重复使用。
可维护性：更容易管理和更新较小的组件。
灵活性：组件可以以不同的方式轻松组合，以创建复杂的 UI。

什么时候使用组合

当你需要从更小、可重用的组件创建复杂的 UI 时。
当你想避免继承的缺陷时，例如紧密耦合和难以管理状态。

解释 React 中的组合模式