react hooks使用_使用Hooks动态加载React组件

最新推荐文章于 2024-08-13 08:41:29 发布

cukw6666

最新推荐文章于 2024-08-13 08:41:29 发布

阅读量2.9k

点赞数

文章标签： java javascript python vue 数据库 ViewUI

原文链接：https://www.digitalocean.com/community/tutorials/react-loading-components-dynamically-hooks

版权

本文介绍了如何使用React Hooks动态加载组件，以提高网站的加载速度和维护性。通过示例展示了如何处理不同数据类型，按需加载组件，从而避免发送不必要的JavaScript到浏览器，实现更高效的资源管理。

摘要由CSDN通过智能技术生成

react hooks使用

Dynamic sites need flexibility. Flexibility results in more code. More code means increased maintenance time. How can we keep our sites maintainable and fast?

动态站点需要灵活性。灵活性导致更多代码。更多代码意味着增加维护时间。我们如何保持网站的可维护性和快速性？

One of the ways to load sites faster is to send browsers less JavaScript to process.

更快加载网站的方法之一是向浏览器发送较少JavaScript进行处理。

We can shave off a few bytes by lazy-loading React components (“components” hereafter). Such a dynamic loading can also make code maintainable (but not always).

我们可以通过延迟加载React组件(以下简称“组件”)来节省一些字节。这种动态加载还可以使代码可维护(但并非始终如此)。

We’ll take a look at how to load components dynamically, and check out some more advanced usage. Lastly, we’ll load only the components being used.

我们将研究如何动态加载组件，并检查一些更高级的用法。最后，我们将仅加载正在使用的组件。

目录 (Table of Contents)

动态加载组件 (Loading Components Dynamically)

Suppose you are showing a different component depending on a property, subredditsToShow.

假设您根据属性subredditsToShow显示了一个不同的组件。

Try out here

在这里尝试

import React from 'react';
import shortid from 'shortid';

import LearnReactView from './views/learnreactView';
import ReactView from './views/reactView';
import JavaScriptView from './views/javascriptView';
import NullView from './views/NullView';

export default function App({ subredditsToShow }) {
  const subredditElementList = subredditsToShow.map(
    subreddit => {
      switch (subreddit) {
        case 'reactjs':
          return <ReactView key={shortid.generate()} />;
        case 'learnreactjs':
          return (
            <LearnReactView key={shortid.generate()} />
          );
        case 'javascript':
          return (
            <JavaScriptView key={shortid.generate()} />
          );
        defa