2

过去，我构建了一个“单页应用程序”，除了使用 JQuery 进行常规 DOM 操作外，什么都不使用。

现在，我正在用 React-Redux 重写同一个应用程序。从我的旧 JQuery 应用程序重新创建某个页面后，我注意到一些令人不安的事情：React 做同样的事情，但慢得多。事实上，我会说它的速度大约是原来的两倍。

我开始优化我的组件，并确保它仅在必要时呈现。然而，重新渲染 HTML 的整个过程比较慢。

该组件的作用：我从服务器获取一个包含 150 个项目的数组。每个项目中可能有几个项目。所以，我的 JSX 有两个嵌套的 map() 函数：

{this.props.duplicates.length>0 &&(
                   this.props.duplicates.map((duplicate_group,index)=>{
                    return(
                        <form key={index}>
                    {
                        duplicate_group.map((book)=>{
                            return(


                             <div key={book.id}>

                        <label className="specific_product_for_merging" htmlFor={book.id} id={book.id}>
                        <input type="radio" defaultValue={book.id} id={book.id} name="name" />
                         <span className="duplicates_span">Title:<Link to={`/products/${book.id}`}> {book.name}</Link> </span>
                          <span className="duplicates_span">ID: {book.id}</span>
                          <span className=" duplicates_span">Author:<Link to={`/advancedsearch?advancedSearch=byTitle&author=${book.author}`}> {book.author} </Link></span>
                          <span className=" duplicates_span">Publisher:<Link  to={`/advancedsearch?advancedSearch=byTitle&publisher=${book.publisher}`}> {book.publisher}</Link></span>
                          <span  className="duplicates_span">Available Copies: 0</span>
                        </label>
                        <br />


                             </div>


                            ) 
                        })    
                    }

            <input type="submit" className="submit_merged_titles btn btn-primary btn-sm" defaultValue="Merge" />   
        </form>
            )


           })  
         )
          }

我正在用 Jquery 做同样的事情。出于某种原因，直接 DOM 操作似乎工作得更快，至少在这种情况下是这样。

请注意，每次我获取新数据（我正在使用分页）时，所有数据都是不同的，因此 React 必须重新渲染所有 DOM 元素。但是，重新渲染虚拟 DOM，然后渲染 DOM 本身的整个过程，为什么实际上慢了两倍呢？

4

0 回答 0