開源日報每天推薦一個 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》