JSX 重复 - Javascript

JSX是JavaScript XML的简写，一种在React中生成HTML的语法标记。使用JSX可以使得React组件的编写更加直观、简单，同时还能通过代码高亮显示来提高代码的可读性。

然而，有时候我们会遇到JSX代码重复的情况，这既会影响代码的可读性，也会加大维护的难度。那么，如何避免JSX的重复呢？

下面，我们来介绍一些常见的避免JSX重复的方法。

1. 提取公共组件

当我们在不同的React组件中使用相同的JSX代码时，可以将这些重复的JSX代码提取出来，形成一个公共组件。这样就可以避免在多个地方重复编写相同的JSX代码，提高代码的复用率。

例如，我们可以将下面代码中的静态部分提取为一个Header组件：

function Page1() {
  return (
    <div>
      <h1>Page 1 Header</h1>
      <p>Content of page 1</p>
    </div>
  )
}

function Page2() {
  return (
    <div>
      <h1>Page 2 Header</h1>
      <p>Content of page 2</p>
    </div>
  )
}

提取公共组件后的代码如下：

function Header(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  )
}

function Page1() {
  return (
    <Header title="Page 1 Header" content="Content of page 1" />
  )
}

function Page2() {
  return (
    <Header title="Page 2 Header" content="Content of page 2" />
  )
}

我们可以看到，Header组件接收props参数，这样就可以在多个位置复用相同的JSX代码了。

2. 使用高阶组件

如果我们有多个React组件需要共享相同的JSX代码和逻辑，但是这些组件之间没有明显的关系，也不能提取出一个公共组件，那么我们可以考虑使用高阶组件。

高阶组件是一个函数，把一个组件作为输入，并返回一个新的组件作为输出。我们可以在高阶组件内部编写重复的JSX代码和逻辑，并将需要共享这些代码和逻辑的组件作为参数传入到高阶组件中。

例如，我们可以使用一个名为withLoading的高阶组件，在多个组件中共享相同的加载动画效果：

function withLoading(WrappedComponent) {
  return function WithLoading(props) {
    const { isLoading, ...rest } = props;
    if (isLoading) {
      return <div>Loading...</div>;
    }
    return <WrappedComponent {...rest} />;
  };
}

function Page1(props) {
  return <div>{props.content}</div>;
}

function Page2(props) {
  return <div>{props.content}</div>;
}

const Page1WithLoading = withLoading(Page1);
const Page2WithLoading = withLoading(Page2);

我们首先定义了一个名为withLoading的高阶组件，它接收一个组件作为参数，并返回一个新的组件。在WithLoading组件中，我们根据isLoading属性的值来决定是否展示Loading的JSX代码，然后使用<WrappedComponent {...rest} />来渲染传入的组件。

最后，我们通过withLoading高阶组件，创建了两个新的组件Page1WithLoading和Page2WithLoading，它们都共享了withLoading中的代码和逻辑。

3. 使用React.Fragment

React.Fragment是React提供的一种特殊组件，它可以用来作为JSX代码的父级容器，但是不会生成任何的HTML标签。

有时候，我们在编写JSX代码时，如果多个标签之外需要包裹在同一个父级容器中，但是不想额外生成一个HTML标签，那么可以使用<React.Fragment>，避免JSX代码的重复。

例如，我们可以将下面代码中的<div>标签替换为<React.Fragment>：

function MyComponent() {
  return (
    <div>
      <h1>Title</h1>
      <p>Content</p>
    </div>
  )
}

用<React.Fragment>替换后的代码如下：

function MyComponent() {
  return (
    <React.Fragment>
      <h1>Title</h1>
      <p>Content</p>
    </React.Fragment>
  )
}

这样就可以避免因为多余的<div>标签导致的JSX代码的重复。