React 고차 컴포넌트란 무엇입니까? 탐색경로 탐색은 어떻게 생성되나요?

React 고차 컴포넌트란 무엇인가요? React 고차 컴포넌트를 사용하여 탐색경로 탐색을 만드는 방법에 대해 이야기해 보겠습니다. 모두에게 도움이 되기를 바랍니다.

React 고차 컴포넌트란

React 고차 컴포넌트는 수정이 필요한 React 컴포넌트를 고차 함수 형태로 래핑하고 처리된 React 컴포넌트를 반환합니다. React 고차 구성 요소는 react-router의 withRouter 및 react-redux의 connect와 같이 React 생태계에서 매우 자주 사용됩니다. > 및 기타 많은 API가 이러한 방식으로 구현됩니다. react-router 中的 withRouter 以及 react-redux 中 connect 等许多 API 都是以这样的方式来实现的。

使用 React 高阶组件的好处

在工作中，我们经常会有很多功能相似，组件代码重复的页面需求，通常我们可以通过完全复制一遍代码的方式实现功能，但是这样页面的维护可维护性就会变得极差，需要对每一个页面里的相同组件去做更改。因此，我们可以将其中共同的部分，比如接受相同的查询操作结果、组件外同一的标签包裹等抽离出来，做一个单独的函数，并传入不同的业务组件作为子组件参数，而这个函数不会修改子组件，只是通过组合的方式将子组件包装在容器组件中，是一个无副作用的纯函数，从而我们能够在不改变这些组件逻辑的情况下将这部分代码解耦，提升代码可维护性。

自己动手实现一个高阶组件

前端项目里，带链接指向的面包屑导航十分常用，但由于面包屑导航需要手动维护一个所有目录路径与目录名映射的数组，而这里所有的数据我们都能从 react-router 的路由表中取得，因此我们可以从这里入手，实现一个面包屑导航的高阶组件。

首先我们看看我们的路由表提供的数据以及目标面包屑组件所需要的数据：

// 这里展示的是 react-router4 的route示例
let routes = [
  {
    breadcrumb: '一级目录',
    path: '/a',
    component: require('../a/index.js').default,
    items: [
      {
        breadcrumb: '二级目录',
        path: '/a/b',
        component: require('../a/b/index.js').default,
        items: [
          {
            breadcrumb: '三级目录1',
            path: '/a/b/c1',
            component: require('../a/b/c1/index.js').default,
            exact: true,
          },
          {
            breadcrumb: '三级目录2',
            path: '/a/b/c2',
            component: require('../a/b/c2/index.js').default,
            exact: true,
          },
      }
    ]
  }
]

// 理想中的面包屑组件
// 展示格式为 a / b / c1 并都附上链接
const BreadcrumbsComponent = ({ breadcrumbs }) => (
  <div>
    {breadcrumbs.map((breadcrumb, index) => (
      <span key={breadcrumb.props.path}>
        <link to={breadcrumb.props.path}>{breadcrumb}</link>
        {index < breadcrumbs.length - 1 && <i> / </i>}
      </span>
    ))}
  </div>
);

这里我们可以看到，面包屑组件需要提供的数据一共有三种，一种是当前页面的路径，一种是面包屑所带的文字，一种是该面包屑的导航链接指向。

其中第一种我们可以通过 react-router 提供的 withRouter 高阶组件包裹，可使子组件获取到当前页面的 location 属性，从而获取页面路径。

后两种需要我们对 routes 进行操作，首先将 routes 提供的数据扁平化成面包屑导航需要的格式，我们可以使用一个函数来实现它。

/**
 * 以递归的方式展平react router数组
 */
const flattenRoutes = arr =>
  arr.reduce(function(prev, item) {
    prev.push(item);
    return prev.concat(
      Array.isArray(item.items) ? flattenRoutes(item.items) : item
    );
  }, []);

之后将展平的目录路径映射与当前页面路径一同放入处理函数，生成面包屑导航结构。

export const getBreadcrumbs = ({ flattenRoutes, location }) => {
  // 初始化匹配数组match
  let matches = [];

  location.pathname
    // 取得路径名，然后将路径分割成每一路由部分.
    .split('?')[0]
    .split('/')
    // 对每一部分执行一次调用`getBreadcrumb()`的reduce.
    .reduce((prev, curSection) => {
      // 将最后一个路由部分与当前部分合并，比如当路径为 `/x/xx/xxx` 时，pathSection分别检查 `/x` `/x/xx` `/x/xx/xxx` 的匹配，并分别生成面包屑
      const pathSection = `${prev}/${curSection}`;
      const breadcrumb = getBreadcrumb({
        flattenRoutes,
        curSection,
        pathSection,
      });

      // 将面包屑导入到matches数组中
      matches.push(breadcrumb);

      // 传递给下一次reduce的路径部分
      return pathSection;
    });
  return matches;
};

然后对于每一个面包屑路径部分，生成目录名称并附上指向对应路由位置的链接属性。

const getBreadcrumb = ({ flattenRoutes, curSection, pathSection }) => {
  const matchRoute = flattenRoutes.find(ele => {
    const { breadcrumb, path } = ele;
    if (!breadcrumb || !path) {
      throw new Error(
        'Router中的每一个route必须包含 `path` 以及 `breadcrumb` 属性'
      );
    }
    // 查找是否有匹配
    // exact 为 react router4 的属性，用于精确匹配路由
    return matchPath(pathSection, { path, exact: true });
  });

  // 返回breadcrumb的值，没有就返回原匹配子路径名
  if (matchRoute) {
    return render({
      content: matchRoute.breadcrumb || curSection,
      path: matchRoute.path,
    });
  }

  // 对于routes表中不存在的路径
  // 根目录默认名称为首页.
  return render({
    content: pathSection === '/' ? '首页' : curSection,
    path: pathSection,
  });
};

之后由 render 函数生成最后的单个面包屑导航样式。单个面包屑组件需要为 render 函数提供该面包屑指向的路径 path, 以及该面包屑内容映射content 这两个 props。

/**
 *
 */
const render = ({ content, path }) => {
  const componentProps = { path };
  if (typeof content === 'function') {
    return <content {...componentProps} />;
  }
  return <span {...componentProps}>{content}</span>;
};

有了这些功能函数，我们就能实现一个能为包裹组件传入当前所在路径以及路由属性的 React 高阶组件了。传入一个组件，返回一个新的相同的组件结构，这样便不会对组件外的任何功能与操作造成破坏。

const BreadcrumbsHoc = (
  location = window.location,
  routes = []
) => Component => {
  const BreadComponent = (
    <Component
      breadcrumbs={getBreadcrumbs({
        flattenRoutes: flattenRoutes(routes),
        location,
      })}
    />
  );
  return BreadComponent;
};
export default BreadcrumbsHoc;

调用这个高阶组件的方法也非常简单，只需要传入当前所在路径以及整个 react router 生成的 routes 属性即可。
至于如何取得当前所在路径，我们可以利用 react router 提供的 withRouter 函数，如何使用请自行查阅相关文档。
值得一提的是，withRouter 本身就是一个高阶组件，能为包裹组件提供包括 location 属性在内的若干路由属性。所以这个 API 也能作为学习高阶组件一个很好的参考。

withRouter(({ location }) =>
  BreadcrumbsHoc(location, routes)(BreadcrumbsComponent)
);

Q&A

• 如果react router 生成的 routes 不是由自己手动维护的，甚至都没有存在本地，而是通过请求拉取到的，存储在 redux 里，通过 react-redux 提供的 connect 高阶函数包裹时，路由发生变化时并不会导致该面包屑组件更新。使用方法如下：

function mapStateToProps(state) {
  return {
    routes: state.routes,
  };
}

connect(mapStateToProps)(
  withRouter(({ location }) =>
    BreadcrumbsHoc(location, routes)(BreadcrumbsComponent)
  )
);

---

这其实是 connect 函数的一个bug。因为 react-redux 的 connect 高阶组件会为传入的参数组件实现 shouldComponentUpdate 这个钩子函数，导致只有 prop 发生变化时才触发更新相关的生命周期函数(含 render)，而很显然，我们的 location 对象并没有作为 prop 传入该参数组件。

官方推荐的做法是使用 withRouter 来包裹 connect 的 return value

React 고차 컴포넌트 사용의 이점🎜🎜🎜직장에서 비슷한 기능과 반복되는 컴포넌트 코드를 가진 페이지 요구 사항이 많은 경우가 많습니다. 코드를 완전히 복사하여 기능을 구현하지만 페이지의 유지 관리성이 극도로 저하되고 각 페이지의 동일한 구성 요소를 변경해야 합니다. 따라서 동일한 쿼리 작업 결과를 받아들이고, 동일한 레이블을 구성 요소 외부에 래핑하는 등의 공통 부분을 추출하여 별도의 함수를 만들고, 서로 다른 비즈니스 구성 요소를 하위 구성 요소 매개 변수로 전달할 수 있으며, 이 함수는 하위 구성 요소를 수정하지 않고 결합을 통해 컨테이너 구성 요소에 하위 구성 요소를 래핑합니다. 이는 부작용이 없는 순수한 함수이므로 이러한 구성 요소의 논리를 변경하지 않고 코드의 이 부분을 분리하고 개선할 수 있습니다. 코드 유지 관리성. 🎜

🎜직접 고차 컴포넌트 구현🎜🎜🎜프론트엔드 프로젝트에서는 링크가 포함된 탐색경로 탐색이 매우 일반적으로 사용되지만 탐색경로 탐색은 수동 유지 관리가 필요하기 때문입니다. 디렉터리 경로와 디렉터리 이름 간의 매핑 배열입니다. 여기에 있는 모든 데이터는 react-router의 라우팅 테이블에서 얻을 수 있으므로 여기에서 다음의 상위 수준 구성 요소를 구현할 수 있습니다. 탐색경로 탐색. 🎜🎜먼저 라우팅 테이블에서 제공하는 데이터와 대상 탐색경로 구성요소에 필요한 데이터를 살펴보겠습니다. 🎜

withRouter(
  connect(mapStateToProps)(({ location, routes }) =>
    BreadcrumbsHoc(location, routes)(BreadcrumbsComponent)
  )
);

🎜여기서 탐색경로 구성요소가 제공해야 하는 세 가지 유형의 데이터가 있음을 알 수 있습니다. 하나는 현재 페이지 경로, 하나는 탐색경로에 포함된 텍스트이고 다른 하나는 탐색경로의 탐색 링크입니다. 🎜🎜우선, React-router에서 제공하는 withRouter 상위 컴포넌트 패키지를 사용할 수 있는데, 이를 통해 하위 컴포넌트가 현재 페이지의 위치 속성을 얻어 페이지 경로를 얻을 수 있습니다. 🎜🎜후자의 두 가지에서는 경로를 운영해야 합니다. 먼저 경로에서 제공하는 데이터를 탐색경로 탐색에 필요한 형식으로 평면화하여 구현할 수 있습니다. 🎜rrreee🎜그런 다음 평면화된 디렉터리 경로 매핑과 현재 페이지 경로를 처리 함수에 넣어 탐색경로 탐색 구조를 생성합니다. 🎜rrreee🎜그런 다음 각 이동 경로 부분에 대해 디렉터리 이름을 생성하고 해당 라우팅 위치를 가리키는 링크 속성을 첨부합니다. 🎜rrreee🎜그런 다음 렌더링 함수는 최종 단일 탐색경로 탐색 스타일을 생성합니다. 단일 탐색경로 구성요소는 탐색경로가 가리키는 경로 path와 탐색경로의 콘텐츠 매핑 content의 두 prop을 렌더링 함수에 제공해야 합니다. 🎜rrreee🎜이러한 함수를 사용하면 현재 경로와 라우팅 속성을 래핑된 구성 요소에 전달할 수 있는 React 고차 구성 요소를 구현할 수 있습니다. 컴포넌트를 전달하고 새롭고 동일한 컴포넌트 구조를 반환하므로 컴포넌트 외부의 기능과 작동이 손상되지 않습니다. 🎜rrreee🎜이 상위 구성 요소를 호출하는 방법도 매우 간단합니다. 현재 경로와 전체 react Router에서 생성된 routes 속성만 전달하면 됩니다. .
현재 경로를 얻는 방법은 react router에서 제공하는 withRouter 기능을 사용하면 됩니다. 관련 문서를 참고하세요.
withRouter 자체는 래핑된 구성 요소에 대한 location 속성을 ​​포함하여 여러 라우팅 속성을 제공할 수 있는 고차 구성 요소라는 점을 언급할 가치가 있습니다. 따라서 이 API는 고차 컴포넌트 학습을 위한 좋은 참고 자료로도 사용될 수 있습니다. 🎜rrreee

Q&A🎜

• 🎜 react router가 경로를 생성하는 경우 code>는 제가 직접 수동으로 관리하지 않고, 로컬에도 존재하지 않지만 요청을 통해 가져와 react-redux에서 제공하는 connect를 통해 redux에 저장됩니다. 고차 함수로 래핑된 경우 경로 변경으로 인해 이동 경로 구성 요소가 업데이트되지 않습니다. 사용법은 다음과 같습니다: 🎜

rrreee

---

🎜이것은 실제로 connect 함수의 🎜버그🎜입니다. React-redux의 연결 상위 구성 요소는 들어오는 매개 변수 구성 요소에 대한 shouldComponentUpdate 후크 기능을 구현하기 때문에 업데이트 관련 수명 주기 기능(렌더링 포함)은 prop이 변경될 때만 트리거되며🎜 분명히 우리 위치는 객체입니다. 매개변수 구성요소에 소품으로 전달되지 않습니다. 🎜🎜공식적으로 권장되는 접근 방식은 withRouter를 사용하여 connect의 반환 값을 래핑하는 것입니다. 즉🎜

withRouter(
  connect(mapStateToProps)(({ location, routes }) =>
    BreadcrumbsHoc(location, routes)(BreadcrumbsComponent)
  )
);

其实我们从这里也可以看出，高阶组件同高阶函数一样，不会对组件的类型造成任何更改，因此高阶组件就如同链式调用一样，可以任意多层包裹来给组件传入不同的属性，在正常情况下也可以随意调换位置，在使用上非常的灵活。这种可插拔特性使得高阶组件非常受React生态的青睐，很多开源库里都能看到这种特性的影子，有空也可以都拿出来分析一下。

위 내용은 React 고차 컴포넌트란 무엇입니까? 탐색경로 탐색은 어떻게 생성되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!