reactjs – React性能：渲染中等大小的列表,具有明显的延迟

发布时间：2020-12-15 09:34:04 所属栏目：百科来源：网络整理

导读：当导航到具有250个重复组件的路由时,我遇到了反应和反应路由器的延迟. 我用chrome进行了分析,发现瓶颈在于“ReactCompositeComponentMixin.mountComponent”. 该函数本身花费36.1ms,总共570.7ms. 我注意到,在react-router中访问路由会导致分配的routehandler

当导航到具有250个重复组件的路由时,我遇到了反应和反应路由器的延迟.
我用chrome进行了分析,发现瓶颈在于“ReactCompositeComponentMixin.mountComponent”.
该函数本身花费36.1ms,总共570.7ms.

我注意到,在react-router中访问路由会导致分配的routehandler组件(其中包含这250个重复的组件)每次都重新初始化.
在这种情况下,此routehandler组件的状态对象是Immutable,但我无法利用它的好处,因为shouldComponentUpdate永远不会被触发.

我想知道这是否是一个知道问题的反应.
如果是,那么我会尝试在初始加载时渲染有限的记录,并在用户向下滚动时加载其余的记录.

所有组件都是“纯粹的”,并且不执行复杂的计算.

重复组件的html结构如下：

<section data-reactid=".0.3.0.$3553">
  <div data-reactid=".0.3.0.$3553.0"><span data-reactid=".0.3.0.$3553.0.0">TEST</span><span data-reactid=".0.3.0.$3553.0.1">TEST</span>
  </div>
  <header data-reactid=".0.3.0.$3553.1">
    <h1 data-reactid=".0.3.0.$3553.1.0">TEST</h1>
  </header>
  <footer data-reactid=".0.3.0.$3553.2">TEST</footer><i data-reactid=".0.3.0.$3553.3"></i>
  <button data-reactid=".0.3.0.$3553.4">TEST</button>
  <div data-reactid=".0.3.0.$3553.5 ">
    <button data-reactid=".0.3.0.$3553.5.0 ">TEST</button>
  </div>
</section>

解决方法

由于在渲染列表时遇到此性能问题,我的直觉是考虑 keys

渲染应用时是否看到警告？

我建议为每个重复的结构添加一个唯一的键属性.

最简单但不是最好的方法是添加索引

arrayOfData.map((data,index)=>< RepeatedComponent key = {index} />)

虽然这将为每个键分配一个唯一值,但这种方法有problems.

最好的方法是将id作为数据的一部分,也许是unique identifier,你会像这样使用

arrayOfData.map(data =>< RepeatedComponent key = {data.id} />)

这将产生id的负担,并确保它的独特性,但这是最好的方法.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!