开源日报每天推荐一个 GitHub 优质开源项目和一篇精选英文科技或编程文章原文，坚持阅读《开源日报》，保持每日学习的好习惯。

2024年1月14日，开源日报第1074期：
今日推荐开源项目：《htmx》
今日推荐英文原文：《Dynamic Imports in React》

开源项目

今日推荐开源项目：《htmx》传送门：项目链接

推荐理由：htmx在2023年JavaScript Rising Stars“前端框架”类别中获得第二名，仅次于React；
htmx使您可以直接在HTML中使用属性访问AJAX、CSS过渡、WebSockets和服务器发送事件；
htmx非常小巧（~14k min.gz'd），无需依赖，可扩展，兼容IE11，并且与React相比减少了67%的代码基大小

官方直达 htmx.org

英文原文

今日推荐英文原文：Dynamic Imports in React

推荐理由：该文章讨论了在React中的动态导入，允许在运行时加载JavaScript模块，从而提高应用程序的性能和加载速度

import()函数返回一个Promise，允许异步加载模块，使用在例如代码拆分和懒加载，确保只在需要时加载必要的代码
文章还介绍了React.lazy()，用于将动态导入呈现为常规组件，以及React.Suspense()，用于在加载完成之前有条件地暂停组件的呈现，通过示例和用例说明了实际实现的方法

Dynamic Imports in React

Dynamic imports in React allow you to dynamically load JavaScript modules at runtime, which can significantly improve your application’s performance and load times. This technique is particularly useful for code splitting and lazy loading, ensuring that only the necessary code is loaded when needed.

The\ ***import()\*** function returns a Promise that resolves to the module you want to use dynamic import.\

A normal import in JavaScript (using the\ ***import\*** statement) does not return a Promise. It's a synchronous operation and returns the exported values from the imported module.\

import React from 'react';

const AnotherComponent = () => {
  return <div>Another component loaded dynamically!</div>;
};

export default AnotherComponent;
const MyComponent = () => {
  const [importedComponent, setImportedComponent] = useState(null);

  useEffect(() => {
    const importComponent = async () => {
      const module = await import('./AnotherComponent');
      const AnotherComponent = module.default;
      setImportedComponent(<AnotherComponent />);
    };

    importComponent();
  }, []);

  return (
    <div>
      {importedComponent}
      <div>This is my functional component!</div>
    </div>
  );
};

///Another Way is ...///
const MyComponent = async () => {
  const module = import('./AnotherComponent');
  const {AnotherComponent} = await module;
  return <AnotherComponent />;
};

export default MyComponent;

// when u console the export module { default: ""} is contains the all the
// key value pair of the functions name as the key and the value as the 
// definition, with a default key if something is imported as default it
// will be it's value else it will be undefined

When To Use Dynamic Imports?

Although dynamic imports are a great way to improve the performance of your React applications, there are better use cases for using dynamic imports in React apps.

Code Modulation: Dynamic imports can be used when there’s a need for code modulation and fetching data from a server. An example can be found in server-side rendered applications.
Dynamic imports can be used when components are not needed when an application is still loading.
Conditional imports are an excellent use case for dynamic imports; here, a module or component is only imported on pages where they’re needed and when needed in an application.

React.lazy()

The React.lazy() function allows you to render a dynamic import as a regular component. Basically, React.lazy() makes a call to a dynamic import and returns a promise.

import React, { lazy } from "react";
const Blog = React.lazy(() => 
  import('./Pages/Blog'));

React.Suspense()

React.Suspense allows React developers to conditionally suspend the rendering of a React component until it is loaded. React.Suspense provides a fallback prop that accepts a React element which either is a JSX snippet or a React component.

When users visit a page using React dynamic imports, oftentimes they experience a blank page screen, this is done while the application loads the module, this can also cause errors as a result of slow internet connectivity for some users. React.lazy() and React.Suspense when combined solves this issue for users.

To do this, use React.Suspense to suspend the rendering of a component until all dependencies are lazy-loaded, React.Suspense will also display your fallback UI for the user.

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
};

export default App;

下载开源日报APP：https://openingsource.org/2579/
加入我们：https://openingsource.org/about/join/
关注我们：https://openingsource.org/about/love/

开源日报第1074期：前端框架：《htmx》