除了用户交互，经常有在初始页面上不可见的组件。
一个很好的例子是延迟加载在视口中不直接可见的图像，但只有在用户向下滚动时才会加载。
由于不会立即请求所有图像，因此可以减少初始加载时间。
可以对组件做同样的事情！
为了知道组件当前是否在视口中，
可以使用 IntersectionObserver API，
或者 react-lazyload 、 react-loadable-visibility 来快速为应用程序添加可见性的导入。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
// components/ChatInput.js
import React from "react";
import Send from "./icons/Send";
import Emoji from "./icons/Emoji";
import LoadableVisibility from "react-loadable-visibility/react-loadable";
const EmojiPicker = LoadableVisibility({
loader: () => import("./EmojiPicker"),
loading: <p id="loading">Loading</p>
});
const ChatInput = () => {
const [pickerOpen, togglePicker] = React.useReducer(state => !state, false);
return (
<div className="chat-input-container">
<input type="text" placeholder="Type a message..." />
<Emoji onClick={togglePicker} />
{pickerOpen && <EmojiPicker />}
<Send />
</div>
);
};
console.log("ChatInput loading", Date.now());
export default ChatInput;
|
每当 EmojiPicker 被渲染到屏幕上时，在用户点击 Gif 按钮后，react-loadable-visibility 会检测到 EmojiPicker 元素应该在屏幕上可见。
只有这样，当用户看到正在渲染的加载组件时，它才会开始导入模块。
这个回退组件让用户知道应用程序没有冻结：他们只需要等待一小段时间来加载、解析、编译和执行模块！
知识点