Apakah komponen berperingkat tinggi React? Bagaimanakah ia mencipta navigasi serbuk roti?

Apakah komponen tertib tinggi React? Mari kita bincangkan tentang cara menggunakan komponen tertib tinggi React untuk membuat navigasi serbuk roti, saya harap ia akan membantu semua orang.

Apakah komponen tertib tinggi React

Balut komponen tertib lebih tinggi React yang perlu diubah suai dalam bentuk fungsi tertib lebih tinggi , dan kembalikan komponen React selepas pemprosesan selesai. Komponen tertib tinggi React digunakan dengan sangat kerap dalam ekosistem React seperti react-router dalam withRouter dan react-redux dalam connect dilaksanakan dengan cara ini.

Faedah menggunakan komponen tertib tinggi React

Di tempat kerja, kami sering mempunyai banyak keperluan halaman dengan fungsi yang serupa dan kod komponen pendua Biasanya kami boleh menyalin fungsi sepenuhnya dilaksanakan dalam satu pas kod, tetapi kebolehselenggaraan halaman akan menjadi sangat lemah, dan komponen yang sama dalam setiap halaman perlu diubah. Oleh itu, kita boleh mengekstrak bahagian biasa, seperti menerima keputusan operasi pertanyaan yang sama, membalut label yang sama di luar komponen, dsb., membuat fungsi berasingan, dan memasukkan komponen perniagaan yang berbeza sebagai parameter subkomponen, dan fungsi ini Ia tidak akan mengubah suai subkomponen, tetapi membungkus subkomponen dalam komponen bekas melalui gabungan Ia adalah fungsi tulen tanpa kesan sampingan, supaya kita boleh memisahkan bahagian kod ini tanpa mengubah logik komponen ini, dan menambah baik. kod Kebolehkekalan.

Laksanakan komponen tertib tinggi sendiri

Dalam projek hadapan, navigasi serbuk roti dengan pautan sangat biasa digunakan, tetapi kerana navigasi serbuk roti memerlukan penyelenggaraan manual semua direktori Pelbagai pemetaan antara laluan dan nama direktori, dan semua data di sini boleh diperoleh daripada jadual penghalaan react-router, jadi kita boleh bermula dari sini untuk melaksanakan komponen tertib tinggi navigasi serbuk roti.

Pertama, mari kita lihat data yang disediakan oleh jadual penghalaan kami dan data yang diperlukan oleh komponen serbuk roti sasaran:

// 这里展示的是 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>
);

Di sini kita dapat melihat bahawa komponen serbuk roti perlu menyediakan jumlah data Terdapat tiga jenis, satu ialah laluan halaman semasa, satu ialah teks yang dibawa oleh serbuk roti, dan satu lagi ialah pautan navigasi serbuk roti.

Pertama sekali, kita boleh menggunakan pakej komponen tertib tinggi withRouter yang disediakan oleh penghala tindak balas, yang membolehkan subkomponen mendapatkan atribut lokasi halaman semasa dan dengan itu mendapatkan laluan halaman.

Dua yang terakhir memerlukan kami untuk mengendalikan laluan Pertama, ratakan data yang disediakan oleh laluan ke dalam format yang diperlukan untuk navigasi serbuk roti. Kami boleh menggunakan fungsi untuk melaksanakannya.

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

Kemudian letakkan pemetaan laluan direktori yang diratakan dan laluan halaman semasa ke dalam fungsi pemprosesan untuk menjana struktur navigasi serbuk roti.

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;
};

Kemudian untuk setiap bahagian laluan serbuk roti, jana nama direktori dan lampirkan atribut pautan yang menghala ke lokasi penghalaan yang sepadan. Selepas

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,
  });
};

fungsi pemaparan menjana gaya serbuk roti tunggal terakhir. Satu komponen serbuk roti perlu menyediakan fungsi pemaparan dengan dua prop laluan path yang ditunjuk oleh serbuk roti dan pemetaan kandungan content serbuk roti.

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

Dengan fungsi ini, kami boleh melaksanakan komponen tertib lebih tinggi React yang boleh melepasi laluan semasa dan sifat penghalaan kepada komponen yang dibalut. Masukkan komponen dan kembalikan struktur komponen yang baharu dan serupa, supaya ia tidak akan merosakkan sebarang fungsi dan operasi di luar komponen.

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

Kaedah memanggil komponen tertib tinggi ini juga sangat mudah Anda hanya perlu lulus dalam laluan semasa dan atribut react router yang dihasilkan oleh keseluruhan routes.
Bagi cara mendapatkan laluan semasa, kita boleh menggunakan fungsi react router yang disediakan oleh withRouter Sila rujuk dokumentasi yang berkaitan untuk cara menggunakannya.
Perlu dinyatakan bahawa withRouter sendiri ialah komponen tertib lebih tinggi yang boleh menyediakan beberapa atribut penghalaan termasuk atribut location untuk komponen yang dibalut. Oleh itu, API ini juga boleh digunakan sebagai rujukan yang baik untuk mempelajari komponen peringkat tinggi.

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

S&J

• Jika react router yang dihasilkan oleh routes tidak diselenggara secara manual dengan sendirinya, ia tidak wujud secara tempatan, tetapi ditarik keluar permintaan Apabila ia disimpan dalam redux dan dibalut oleh react-redux fungsi tertib tinggi yang disediakan oleh connect, perubahan dalam laluan tidak akan menyebabkan komponen serbuk roti dikemas kini. Penggunaannya adalah seperti berikut:

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

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

---

Ini sebenarnya adalah connectpepijat fungsi . Oleh kerana komponen tertib tinggi sambung react-redux akan melaksanakan fungsi cangkuk shouldComponentUpdate untuk komponen parameter masuk, menyebabkan fungsi kitaran hayat berkaitan kemas kini (termasuk render) dicetuskan hanya apabila prop berubah, dan jelas sekali , objek lokasi kami tidak dihantar ke dalam komponen parameter sebagai prop.

Kaedah yang disyorkan secara rasmi ialah menggunakan

untuk membalut withRouter daripada connect, iaitu return value

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

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

Atas ialah kandungan terperinci Apakah komponen berperingkat tinggi React? Bagaimanakah ia mencipta navigasi serbuk roti?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!