Question

我在过去构建了一个“单页面应用程序”，除了使用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本身的整个过程怎么会慢两倍呢？

React应用程序比常规JQuery对应程序慢

0 个答案: