React 构建滚动列表，HTML代码在线实时编辑、实时预览

index.html

style.css

tsx

main.tsx

tsx

app.tsx

package.json

tsx

list.tsx

index.html

            
                1
2
3
4
5
6
7
8
9
10
11
12

            
            <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React App</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./main.tsx"></script>
  </body>
</html>

编辑器加载中

style.css

1
2

编辑器加载中

main.tsx

            
                1
2
3
4
5
6
7

            
            import { createRoot } from "react-dom/client"
import App from "./app.tsx"

const root = createRoot(document.getElementById("root"))
root.render(<App />)

编辑器加载中

app.tsx

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14

            
            import { type MouseEvent } from "react"
import confetti from "canvas-confetti"
import List from './list.tsx'

const App = () => {
  return (
    <>
      <List />
    </>
  )
}

export default App

编辑器加载中

package.json

注意：新添加的依赖包首次加载可能会报错，稍后再次刷新即可

            
                1
2
3
4
5
6
7

            
            {
  "dependencies": {
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "canvas-confetti": "1.9.3"
  }
}

编辑器加载中

list.tsx

            
                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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168

            
            import { useCallback, useEffect, useRef, useState, useMemo, memo } from "react";

type ListType = {
  background: string;
  id: number; // 添加唯一ID
};

const listStyle = {
  width: "100%",
  height: "500px",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  fontSize: "50px",
};

const getRandomInt = (max: number): number => {
  return Math.floor(Math.random() * (max + 1));
};

const getRandomRgbColor = (): string => {
  const r = getRandomInt(255);
  const g = getRandomInt(255);
  const b = getRandomInt(255);
  return `rgb(${r}, ${g}, ${b})`;
};

// 使用React.memo包装列表项组件，避免不必要的重渲染
const ListItem = memo(({ item, index }: { item: ListType; index: number }) => {
  return (
    <div style={{ ...listStyle, background: item.background }}>
      <div>{index}</div>
    </div>
  );
});

ListItem.displayName = 'ListItem';

const List = () => {
  const [data, setData] = useState<ListType[]>([]);
  const [loading, setLoading] = useState(false);
  const [hasMore, setHasMore] = useState(true);
  const scrollRef = useRef<HTMLDivElement>(null);
  const observer = useRef<IntersectionObserver>();
  const loadingRef = useRef<HTMLDivElement>(null);
  
  // 使用useMemo缓存数据列表的计算结果
  const dataList = useMemo(() => {
    return data.map((item, index) => (
      <ListItem item={item} index={index} key={item.id} />
    ));
  }, [data]);

  const getList = useCallback(() => {
    if (loading || !hasMore) return;

    setLoading(true);
    const items: ListType[] = [];
    for (let i = 0; i < 10; i++) {
      items.push({ 
        background: getRandomRgbColor(),
        id: Date.now() + i // 生成唯一ID
      });
    }

    setTimeout(() => {
      setData((prevData) => [...prevData, ...items]);
      setLoading(false);
      
      // 模拟数据加载完毕的情况
      if (data.length > 40) {
        setHasMore(false);
      }
    }, 1000);
  }, [loading, hasMore, data.length]);

  // 使用Intersection Observer API替代scroll事件
  useEffect(() => {
    if (loading || !hasMore) return;
    
    const option = {
      root: scrollRef.current,
      rootMargin: '0px',
      threshold: 0.1
    };
    
    observer.current = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        getList();
      }
    }, option);
    
    if (loadingRef.current) {
      observer.current.observe(loadingRef.current);
    }
    
    return () => {
      if (observer.current) {
        observer.current.disconnect();
      }
    };
  }, [getList, loading, hasMore]);

  useEffect(() => {
    // 初始化数据
    if (data.length === 0) {
      setData([{ background: "rgb(233, 32, 38)", id: Date.now() }]);
      getList();
    }
  }, [data.length, getList]);

  return (
    <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
      <h1 style={{ textAlign: "center", padding: "20px", margin: 0 }}>
        优化后的无限滚动列表
      </h1>
      <div style={{ padding: "0 20px", fontSize: "14px", color: "#666" }}>
        <p>性能优化：使用React.memo、useMemo、Intersection Observer API</p>
        <p>已加载项目数: {data.length}</p>
      </div>
      <div
        ref={scrollRef}
        style={{
          flex: 1,
          overflow: "auto",
          border: "1px solid #ccc",
          borderRadius: "8px",
          margin: "10px",
        }}
      >
        {dataList}
        
        <div ref={loadingRef} style={{ height: '1px' }}></div>
        
        {loading && (
          <div
            style={{
              width: "100%",
              height: "100px",
              textAlign: "center",
              lineHeight: "100px",
              fontSize: "20px",
              background: "#f0f0f0",
            }}
          >
            <div>加载中...</div>
          </div>
        )}
        {!hasMore && (
          <div
            style={{
              width: "100%",
              height: "100px",
              textAlign: "center",
              lineHeight: "100px",
              fontSize: "20px",
              background: "#e0e0e0",
            }}
          >
            <div>已加载全部数据</div>
          </div>
        )}
      </div>
    </div>
  );
};

export default List

编辑器加载中

预览

控制台