大型网站的技术架构问题,高德地图上怎么没有菲律宾,扁平化蓝色网站,网页制作视频代码本文分文三部分#xff1a;
HOC高阶组件 higher order componentHooks 16.8版本后新增的钩子API异步组件使用lazy和suspense两个api实现组件代码打包分割和异步加载
一、HOC高阶组件
1、定义
高阶组件不是组件而是函数#xff0c;是react中用于复用组件逻辑的高级技巧
HOC高阶组件 higher order componentHooks 16.8版本后新增的钩子API异步组件使用lazy和suspense两个api实现组件代码打包分割和异步加载
一、HOC高阶组件
1、定义
高阶组件不是组件而是函数是react中用于复用组件逻辑的高级技巧HOC本身不是react一部分是基于react组合特性而形成的设计模式。
2、特性
HOC是纯函数参数是组件返回值也是组件不会修改传入的组件也不会继承复制其行为没有副作用
3、使用原因
代码复用
HOC可以封装组件共享的行为如状态逻辑、事件监听器、状态持久化等。
逻辑抽象
HOC可以将一个复杂组件的共同逻辑抽象出来简化组件结构。
属性代理
HOC可以代理组件的属性简化组件的属性要求。
配置时机
HOC可以在组件渲染前后进行配置进行性能追踪、日志打点
4、实现方式
4.1 属性代理
通过组合的方式将组件包装在容器上。下面的例子是 1操作props
import React form react
// 返回stateless的函数组件
function HOC(WrappedComponent) {const newProps {type: HOC}return props WrappedComponent {...props} {...newProps}/WrappedComponent
}
// 返回有状态的类组件
function HOC(WrappedComponent) {return class extends React.Component {render() {const newProps {type: HOC}return WrappedComponent {...this.props} {...newProps}/WrappedComponent}}
}2操作state
import React fromreact;// 函数式 HOC
function withCounter(Component) {return function WithCounter(props) {const [count, setCount] React.useState(0);const increment () {setCount(count 1);};return (divComponent {...props} count{count} increment{increment} //div);};
}// 原始函数式组件
function MyFunctionalComponent(props) {return (divh1Count: {props.count}/h1button onClick{props.increment}Increment/button/div);
}// 增强后的函数式组件
const CounterComponent withCounter(MyFunctionalComponent);export default CounterComponent;3通过props实现条件渲染
function HOC(WrappedComponent) {return (props) (div{props.isShow? WrappedComponent {...props}/WrappedComponent: div暂无数据/div}/div)
}4.2 配置时机
1类组件实现日志打点
以下是一个使用 React Higher-Order Component (HOC) 在类组件渲染前后进行性能追踪和日志打点的示例
import React fromreact;// HOC 用于性能追踪和日志打点
function withPerformanceTracking(WrappedComponent) {return class extends React.Component {componentDidMount() {console.log(Component ${WrappedComponent.name} is mounting.);this.startTime performance.now();}componentDidUpdate() {console.log(Component ${WrappedComponent.name} updated.);}componentWillUnmount() {console.log(Component ${WrappedComponent.name} is unmounting.);const endTime performance.now();const duration endTime - this.startTime;console.log(Component ${WrappedComponent.name} rendered in ${duration} milliseconds.);}render() {return WrappedComponent {...this.props} /;}};
}// 要被增强的原始组件
class MyComponent extends React.Component {render() {return (divh1Hello, World!/h1/div);}
}// 使用 HOC 增强组件
const TrackedMyComponent withPerformanceTracking(MyComponent);export default TrackedMyComponent;代码中的performance 是浏览器提供的一个全局对象用于获取性能相关的信息。 它包含了一些方法和属性可以用于测量网页性能、获取时间戳等。在上述代码中使用 performance.now() 方法来获取当前的高精度时间戳以便计算组件渲染所花费的时间。 这个对象在大多数现代浏览器中都可用无需额外引入或配置可直接在 JavaScript 代码中使用。
2函数式组件实现日志打点
以下是一个使用高阶组件HOC在 React 函数式组件渲染前后进行性能追踪和日志打点的示例 首先创建一个名为 withPerformanceTracking 的高阶组件
import React, { useEffect, useRef } from react;const withPerformanceTracking (WrappedComponent) {const PerfTrackedComponent (props) {const startTimeRef useRef(null);const endTimeRef useRef(null);useEffect(() {startTimeRef.current performance.now();return () {endTimeRef.current performance.now();const duration endTimeRef.current - startTimeRef.current;console.log(Component ${WrappedComponent.name} rendered in ${duration} milliseconds.);};}, []);return WrappedComponent {...props} /;};return PerfTrackedComponent;
};export default withPerformanceTracking;然后在你的函数式组件中使用这个高阶组件
import React from react;
import withPerformanceTracking from ./withPerformanceTracking;const MyComponent ({ data }) {return (divp{data}/p/div);
};export default withPerformanceTracking(MyComponent);在上述代码中 withPerformanceTracking 高阶组件接收一个 WrappedComponent被包装的组件作为参数。 在 PerfTrackedComponent 中使用 useEffect 在组件挂载时记录开始时间startTimeRef在组件卸载时记录结束时间endTimeRef然后计算渲染时间并输出到控制台。 最后将 WrappedComponent 渲染出来并传递所有的 props。 对于日志打点你可以根据具体需求在 useEffect 的返回函数中添加更多的日志记录逻辑比如将数据发送到服务器或者记录到特定的日志文件中。 为什么使用了useRef useRef的详细分析将在Hooks部分记录这里先简单介绍一下上面代码中使用useRef的原因
保存可变值在整个组件生命周期内有效 useRef 创建的 ref 对象在组件的整个生命周期内保持不变其 .current 属性可以用来存储任何可变的值。 在 withPerformanceTracking 高阶组件中startTimeRef 和 endTimeRef 需要在 useEffect 的回调函数以及其返回的清理函数中都能够访问到同一个变量用来记录开始时间和结束时间。如果使用普通的变量在每次组件重新渲染时这些变量会被重新初始化导致无法正确记录时间。 例如当组件第一次挂载时useEffect 中的 startTimeRef.current 被设置为开始时间。当组件卸载时在 useEffect 的返回函数中可以通过 endTimeRef.current 获取结束时间并进行计算这期间 startTimeRef 和 endTimeRef 始终指向同一个引用保证了数据的一致性。避免不必要的组件重新渲染 useRef 创建的 ref 对象不会触发组件的重新渲染。如果使用 useState 来保存开始时间和结束时间每次更新 state 都会导致组件重新渲染这可能会带来不必要的性能开销特别是在这种只用于记录时间而不需要更新 UI 的场景下。 而 useRef 保存的值只是单纯的存储在内存中不会引发组件的重新渲染更适合用于存储这种不需要影响 UI 渲染的数据。
二、Hooks
1、Hooks定义
Hooks是16.8版本以后新增的钩子API它允许在函数式组件中使用状态state和其他 React 特性而无需将组件转换为类组件。Hooks 解决了类组件存在的一些痛点如代码复用性、可读性和理解成本等问题使代码更加简洁和可维护。
2、React Hooks 的优点
2.1 代码复用性提高
可以将一些通用的逻辑如数据获取、表单处理等提取到自定义 Hook 中然后在多个组件中复用。 例如创建一个 useForm 的自定义 Hook 来处理表单状态和验证逻辑多个表单组件都可以使用它。
2.2 使函数式组件更强大
函数式组件在引入 Hooks 之前功能相对有限无法管理内部状态和处理副作用。有了 Hooks 后函数式组件可以像类组件一样进行这些操作并且代码更加简洁。 例如无需再编写类组件中繁琐的 this 绑定和生命周期方法。
2.3 可读性和可维护性增强
类组件中的生命周期方法和状态逻辑可能分散在不同的方法中而函数式组件中的 Hooks 可以将相关的逻辑集中在一起。 例如useEffect 可以将所有的副作用逻辑放在一个地方代码结构更加清晰。
3、常见的 React Hooks
3.1 useState
功能用于在函数式组件中添加状态state。 import React, { useState } from react;const Counter () {const [count, setCount] useState(0);const increment () {setCount(count 1);};return (divpCount: {count}/pbutton onClick{increment}Increment/button/div);};useState 返回一个数组包含当前状态值这里是 count和一个更新状态的函数这里是 setCount。每次调用 setCount 都会触发组件的重新渲染。
3.2 useEffect
用于处理副作用例如数据获取、订阅事件、手动修改 DOM 等操作。 import React, { useState, useEffect } from react;const DataFetcher () {const [data, setData] useState(null);useEffect(() {// 模拟数据获取fetch(https://api.example.com/data).then(response response.json()).then(data setData(data));}, []);return div{data? JSON.stringify(data) : Loading...}/div;};useEffect 接收一个函数作为参数。第二个参数是一个依赖项数组当依赖项发生变化时useEffect 中的函数会重新执行。如果依赖项数组为空[]则该副作用仅在组件挂载时执行一次。
3.3 useEffect实现生命周期功能
useEffect 可以模拟类组件中的 componentDidMount挂载后、componentDidUpdate更新后和 componentWillUnmount卸载前的组合。 import React, { useEffect } from react;const FunctionalComponent () {// 模拟 componentDidMountuseEffect(() {console.log(Component mounted);// 如果要模拟 componentWillUnmount可以返回一个清理函数return () {console.log(Component will unmount);};}, []); // 空数组表示仅在组件挂载时执行一次// 模拟 componentDidUpdate依赖项变化时执行useEffect(() {console.log(Component updated);}, [someDependency]); // 当 someDependency 变化时执行return divFunctional Component/div;};3.3 useEffect 和 useLayoutEffect的区别
一、执行时机 useEffect 在组件渲染到屏幕之后执行。它会在浏览器完成渲染并绘制屏幕后触发通常用于执行那些不会阻塞浏览器更新屏幕的操作如数据获取、订阅事件等。例如当使用 useEffect 进行网络请求获取数据时用户不会感觉到页面卡顿因为页面已经先显示出来了。 useLayoutEffect 在浏览器完成渲染但尚未绘制到屏幕之前执行。它会在 DOM 更新之后、浏览器进行绘制之前触发。这意味着如果在 useLayoutEffect 中进行了 DOM 操作这些操作会在浏览器绘制之前完成从而避免出现视觉上的闪烁或不一致。
二、潜在的性能影响 useEffect 由于它在浏览器绘制之后执行对用户界面的初始显示速度影响较小。但是如果副作用操作耗时较长可能会导致后续的交互出现延迟。比如如果在 useEffect 中进行了大量的计算或频繁的网络请求可能会在用户操作时引起卡顿。 useLayoutEffect 因为它在浏览器绘制之前执行如果其中的操作耗时过长会阻塞浏览器的绘制导致页面在一段时间内没有响应给用户一种卡顿的感觉。所以在 useLayoutEffect 中应该尽量避免执行复杂或耗时的操作以保持页面的响应性。
三、使用场景 useEffect 适用于大多数常见的副作用场景特别是那些不需要立即影响页面布局和视觉效果的操作。比如 发送网络请求获取数据并更新组件状态。订阅和取消订阅事件。定期执行的定时器操作等。 useLayoutEffect 通常用于需要同步处理 DOM 布局的情况以避免视觉上的闪烁或不一致。例如 测量 DOM 元素的尺寸或位置并根据这些信息进行布局调整。在某些情况下需要在更新状态后立即读取 DOM 元素的属性并进行相应的操作。
以下是一个简单的代码示例展示它们的区别
import React, { useState, useEffect, useLayoutEffect } from react;const ExampleComponent () {const [count, setCount] useState(0);// 使用 useEffectuseEffect(() {console.log(useEffect: After render);}, [count]);// 使用 useLayoutEffectuseLayoutEffect(() {console.log(useLayoutEffect: Before paint);}, [count]);return (divpCount: {count}/pbutton onClick{() setCount(count 1)}Increment/button/div);
};export default ExampleComponent;在这个示例中当点击按钮增加 count 值时useLayoutEffect 的日志会先输出在浏览器绘制之前然后 useEffect 的日志会输出在浏览器绘制之后。
3.4 useContext
数据传递用于在函数式组件中访问 React 的上下文Context
注意⚠️useContext() 总是在调用它的组件 上面 寻找最近的 provider。它向上搜索 不考虑 调用 useContext() 的组件中的 provider。
import { createContext, useContext, useState } from react;const ThemeContext createContext(light);export default function MyApp() {const [theme, setTheme] useState(light);return (ThemeContext.Provider value{theme}Form //ThemeContext.ProviderButton onClick{() {setTheme(theme dark ? light : dark);}}Toggle theme/Button/)
}function Form({ children }) {return (Panel titleWelcomeButtonSign up/ButtonButtonLog in/Button/Panel);
}function Panel({ title, children }) {const theme useContext(ThemeContext);const className panel- theme;return (section className{className}h1{title}/h1{children}/section)
}function Button({ children, onClick }) {const theme useContext(ThemeContext);const className button- theme;return (button className{className} onClick{onClick}{children}/button);
}useContext 接收一个 Context 对象作为参数并返回该上下文中的值。通过这种方式组件可以轻松访问在父组件层次结构中定义的共享数据而无需通过层层传递 props
3.5 useReducer
(1) 基本介绍 它通常用于管理复杂的状态逻辑。类似于 Redux 中的 reducer 概念useReducer 接收一个 reducer 函数和一个初始状态initialValue作为参数并返回当前状态和一个分发dispatch函数。
Reducer 函数 这是一个纯函数它接收当前的状态和一个动作action作为参数并根据动作的类型来返回一个新的状态。 格式通常为 (state, action) newState。初始状态 作为应用状态的初始值。它可以是一个基本数据类型、对象或数组等。分发Dispatch函数 用于触发状态的更新。通过调用这个函数并传入一个动作对象 reducer 函数会根据这个动作来计算新的状态。
类似于 useState但更适用于复杂的状态管理逻辑特别是涉及多个子值或复杂的状态更新操作。 2实例
import { useReducer } from react;function reducerfunc(state, action) {if (action.type incremented_age) {return {age: state.age 1};}throw Error(Unknown action.);
}export default function Counter() {const [state, dispatch] useReducer(reducerfunc, { age: 42 });return (button onClick{() {dispatch({ type: incremented_age })}}Increment age/buttonpHello! You are {state.age}./p/);
}useReducer 返回一个由两个值组成的数组
当前的 state首次渲染时为你提供的 初始值如上面的{ age: 42 }。dispatch 函数让你可以根据交互修改 state。
为了更新屏幕上的内容使用一个表示用户操作的 action 来调用 dispatch 函数
function handleClick() {dispatch({ type: incremented_age });
}React 会把当前的 state 和这个 action 一起作为参数传给 reducer 函数然后 reducer 计算并返回新的 state最后 React 保存新的 state并使用它渲染组件和更新 UI。
3原理 1、初始化 在组件首次渲染时useReducer 使用给定的初始状态来初始化状态。 2、状态更新 当调用分发函数dispatch并传入一个动作对象时 useReducer 将当前状态和动作传递给 reducer 函数。 reducer 函数根据动作的类型和当前状态计算出新的状态。 React 使用新的状态来重新渲染组件。
3.6 useMemo
用于缓存计算结果以避免不必要的重复计算。 1基本用法 useMemo接收两个参数
一个计算函数该函数返回一个值。一个依赖项数组用于决定是否需要重新计算。
import React, { useMemo } from react;const MyComponent ({ num1, num2 }) {// 计算两数之和const sum useMemo(() {console.log(计算两数之和);return num1 num2;}, [num1, num2]);return (divp两数之和{sum}/p/div);
};在上面的例子中只有当num1或num2发生变化时才会重新执行计算函数来获取新的sum值。如果num1和num2都没有变化sum将直接使用之前缓存的结果不会重新计算。 2性能优化方面的作用 在一些复杂计算或者计算开销较大的场景中useMemo可以显著提升性能。 例如假设有一个复杂的计算函数
import React, { useMemo } from react;const ComplexCalculationComponent ({ data }) {const complexResult useMemo(() {console.log(进行复杂计算);// 进行复杂的计算比如大量循环和数学运算let result 0;for (let i 0; i 1000000; i) {result data * i;}return result;}, [data]);return (divp复杂计算结果{complexResult}/p/div);
};当data不变时complexResult不会重新计算避免了不必要的计算资源浪费从而提高了应用的性能。 3与useCallback的区别 useMemo用于缓存计算结果它关注的是计算的值。 useCallback用于缓存函数它关注的是函数本身目的是避免父组件重新渲染时子组件因为接收了新的函数引用而不必要地重新渲染。 例如
import React, { useMemo, useCallback } from react;const ParentComponent () {const [count, setCount] React.useState(0);// 使用 useMemo 缓存计算结果const memoizedValue useMemo(() count * 2, [count]);// 使用 useCallback 缓存函数const memoizedCallback useCallback(() console.log(Clicked), []);return (divpCount: {count}/ppMemoized Value: {memoizedValue}/pbutton onClick{() setCount(count 1)}Increment Count/buttonChildComponent onClick{memoizedCallback} //div);
};const ChildComponent ({ onClick }) {console.log(Child Component Rendered);return button onClick{onClick}Child Button/button;
};在上面的例子中memoizedValue 是使用 useMemo 缓存的计算结果memoizedCallback 是使用 useCallback 缓存的函数。当 count 变化时memoizedValue 会重新计算但 memoizedCallback 不会重新创建这有助于减少 ChildComponent 的不必要重新渲染如果 ChildComponent 依赖 onClick 的引用相等来判断是否重新渲染。
3.7 useRef
1基本介绍 1、保存可变值 useRef 创建的 ref 对象在组件的整个生命周期内保持不变其 .current 属性可以用来存储任何可变的值并且这个值在组件的多次渲染之间会被保留下来。 与 useState 不同改变 useRef 的 .current 值不会触发组件的重新渲染。 2、访问 DOM 元素 在类组件中通常使用 ref 属性来获取 DOM 元素或 React 组件实例。在函数式组件中可以使用 useRef 来达到同样的目的。 2工作原理 在函数组件的首次渲染时useRef 创建一个带有 .current 属性的对象并将其返回。 在后续的渲染中useRef 返回的是同一个对象不会因为组件的重新渲染而重新创建。 这使得 .current 属性保存的值在组件的整个生命周期中都可以被访问和修改。 3实例 1、保存一个简单的变量 import React, { useRef } from react;const Counter () {const countRef useRef(0);const increment () {countRef.current 1;console.log(countRef.current);};return (divbutton onClick{increment}Increment/button/div);};export default Counter;在这个例子中countRef 用来保存一个计数器的值每次点击按钮时countRef.current 的值会增加但不会触发组件的重新渲染。 2、访问 DOM 元素 import React, { useRef } from react;const InputExample () {const inputRef useRef(null);const focusInput () {inputRef.current.focus();};return (divinput ref{inputRef} typetext /button onClick{focusInput}Focus Input/button/div);};export default InputExample;这里创建了一个输入框和一个按钮通过 useRef 获取对输入框元素的引用当点击按钮时调用 focus 方法将焦点设置到输入框上。 3、在组件之间共享数据 import React, { useRef } from react;const ParentComponent () {const sharedDataRef useRef({ message: Initial message });const updateData () {sharedDataRef.current.message Updated message;};return (divChildComponent sharedData{sharedDataRef.current} /button onClick{updateData}Update Data/button/div);};const ChildComponent ({ sharedData }) {return p{sharedData.message}/p;};export default ParentComponent;在 ParentComponent 中使用 useRef 创建一个保存共享数据的 ref 对象然后将其传递给 ChildComponent。当在 ParentComponent 中更新 sharedDataRef.current 的值时ChildComponent 中显示的内容也会相应更新因为它们共享了同一个引用。
4、使用Hooks实现Error Boundaries
在 React 中错误边界Error Boundaries是一种用于捕获和处理组件树中 JavaScript 错误的机制从 React 16 版本开始支持。使用 React Hooks 来创建错误边界可以通过以下步骤实现 一、创建错误边界组件 创建一个函数式组件来作为错误边界组件
import React, { useState, useEffect } from react;function ErrorBoundary() {const [hasError, setHasError] useState(false);const [errorMessage, setErrorMessage] useState();useEffect(() {const logError (error, info) {setHasError(true);setErrorMessage(${error.toString()} - ${info});// 这里可以添加将错误信息发送到服务器等其他逻辑};// 在组件挂载时添加全局错误处理window.addEventListener(error, logError);window.addEventListener(unhandledrejection, logError);// 在组件卸载时移除事件监听器return () {window.removeEventListener(error, logError);window.removeEventListener(unhandledrejection, logError);};}, []);if (hasError) {return div发生错误: {errorMessage}/div;}return null;
}export default ErrorBoundary;在这个组件中使用 useState 来管理 hasError是否发生错误和 errorMessage错误信息的状态。useEffect 用于在组件挂载时添加全局的 error 和 unhandledrejection 事件监听器来捕获错误并在组件卸载时移除这些监听器。 二、使用错误边界组件 在需要捕获错误的地方将组件包裹在错误边界组件中。例如
import React from react;
import ErrorBoundary from ./ErrorBoundary;
import SomeComponentThatMightThrowError from ./SomeComponentThatMightThrowError;const App () {return (ErrorBoundarySomeComponentThatMightThrowError //ErrorBoundary);
};export default App;这里将 SomeComponentThatMightThrowError 组件包裹在 ErrorBoundary 组件中当 SomeComponentThatMightThrowError 组件在渲染过程中发生 JavaScript 错误时ErrorBoundary 组件会捕获到这个错误更新状态并显示错误信息。 注意事项 1、错误边界只能捕获组件树中其下方的组件的错误。如果错误发生在错误边界组件自身的渲染函数或生命周期方法中错误边界无法捕获该错误。 2、错误边界不会捕获事件处理程序中的错误例如 onClick 回调函数中的错误但可以通过在 try-catch 块中包裹事件处理逻辑来处理这些错误。 3、可以在组件树的不同层次使用多个错误边界来分层捕获和处理错误以提供更精细的错误处理。
5、自定义hooks
类组件中部分代码写在生命周期componentWillMount如何在函数式组件中实现这个componentWillMount
// React hooks 模拟 componentWillMount
const useComponentWillMount (cb) {const willMount useRef(true);if (willMount.current) cb();willMount.current false;
};// React 组件
const MyComponent () {useComponentWillMount(() {console.log(Component will mount);});useEffect(() {console.log(Component did mount);}, []);上面这段代码的分析
5.1 useComponentWillMount 自定义 Hook
const willMount useRef(true); 使用 useRef 创建了一个 willMount 的引用对象。在 React 中useRef 创建的对象在组件的整个生命周期内保持不变这里 willMount.current 初始值被设置为 true。 if (willMount.current) cb(); 在函数内部当 willMount.current 为 true 时会调用传入的 cb 回调函数。这是模拟 componentWillMount 中执行某些逻辑的地方。 willMount.current false; 执行完 cb 之后将 willMount.current 设置为 false确保这个模拟的“挂载前”逻辑只执行一次。
5.2 MyComponent 组件
useComponentWillMount(() { console.log(Component will mount); }); 在组件内部调用 useComponentWillMount 并传入一个回调函数。当组件开始渲染时这个回调函数会在 useComponentWillMount 内部根据 willMount.current 的初始值为 true 而被执行一次模拟了 componentWillMount 的行为输出 Component will mount。 useEffect(() { console.log(Component did mount); }, []); useEffect 是 React 的另一个 Hook用于处理副作用。这里的 useEffect 传入了一个空的依赖数组 []这意味着该 useEffect 的回调函数只会在组件挂载后执行一次输出 Component did mount。
这种模拟方式在某些情况下可以近似地实现类似 componentWillMount 的效果但需要注意的是在 React 的最新实践中componentWillMount 已经被标记为不推荐使用因为它可能会导致一些不可预测的行为和性能问题。而且 useEffect 通常更适合处理大多数的副作用和与组件生命周期相关的逻辑。
同时在实际开发中应该根据具体的需求和 React 的最佳实践来选择合适的方式来组织代码和处理组件的生命周期相关逻辑。
三、异步组件
使用lazy和suspense两个api实现组件代码打包分割和异步加载
1、创建一个异步组件
假设我们有一个名为 HeavyComponent 的组件它可能需要一些时间来加载比如进行复杂的计算或加载大量数据。 创建一个新文件 HeavyComponent.js import React from react;const HeavyComponent () {return div这是一个需要异步加载的重组件/div;};export default HeavyComponent;2、在主应用中使用 lazy 和 Suspense import React, { lazy, Suspense } from react;import ./App.css;const HeavyComponent lazy(() import(./HeavyComponent));const App () {return (div classNameAppSuspense fallback{div正在加载.../div}HeavyComponent //Suspense/div);};export default App;在上述代码中 lazy 函数用于将 HeavyComponent 的加载变为异步的。它接受一个函数该函数返回一个 Promise当 Promise 解析时就会得到实际的组件模块。 Suspense 组件用于在异步组件加载时显示一个 fallback回退内容这里是一个简单的“正在加载…”的提示。当 HeavyComponent 还在加载时fallback 内容会显示在页面上一旦组件加载完成就会显示 HeavyComponent。 这样当应用运行时HeavyComponent 会在需要时才进行异步加载从而减少初始加载时间提高应用的性能和用户体验。 注意这种方式需要使用支持动态导入import()的构建工具如 Webpack。
