更实用的表格渲染方法

Question

我在 React 方面并不先进，我有一个可能是初学者常见的问题。 我注意到（也许我错了），但是每次需要迭代数组以在表中显示数据时，通常使用 array.map() ，结果每次迭代都会创建一个新的 tr （表行）这会导致 DOM 中的重新渲染，渲染是一个相对复杂的过程。 因此，我尝试使用 array.map 和 document.createDocumentFragment() 创建一个方法，从内存中的 tr 列表创建一个片段，然后将其转储到 tbody 中。这将导致表仅导致一次渲染，而不是每个 tr 渲染 1 次。 我认为这将有助于应用程序的性能，但是，我仍然无法实现这个想法，这有点令人失望。

我尝试使用useEffect并在DOM渲染后获取表的id，但是，我不知道为什么，总是出现一条错误消息，说该元素为空。

就像我说的；我不太擅长 React，也许有一种我还没有发现的方法可以做到这一点。 我也知道有一些 React 表库，也许其中一些是通过这种方式实现的，但这显然看起来很简单，我不想使用外部库。

我尝试写一个方法

Answer 1

如果您在执行 DOM 查询时遇到错误，很可能是因为在文档中可以访问元素之前查询执行得太快。

要解决此问题，请将查询 DOM 的代码封装在 setTimeout 中：

setTimeout(function() 
{
    let element = document.getElementById('myElement');
    if (element)
    {
        console.log('Element found:', element);
    }
    else
    {
        console.error('Element not found');
    }
}, 0);