如何刷新for循环中的组合内容以重绘内容

// 假设我们有一个列表需要动态更新
let list = document.getElementById('list');
let items = ['Item 1', 'Item 2', 'Item 3'];

function updateList(newItems) {
    // 清空现有列表
    list.innerHTML = '';
    
    // 添加新项目
    for (let item of newItems) {
        let li = document.createElement('li');
        li.textContent = item;
        list.appendChild(li);
    }
}

// 模拟数据更新
setTimeout(() => {
    items.push('Item 4');
    updateList(items);
}, 2000);

import React, { useState, useEffect } from 'react';

function App() {
    const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

    useEffect(() => {
        // 模拟数据更新
        setTimeout(() => {
            setItems([...items, 'Item 4']);
        }, 2000);
    }, [items]);

    return (
        <ul id="list">
            {items.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    );
}

export default App;