Question

我们在特定页面上有以下React Component Hierarchy。

<Page>
  ....
  <GoogleMap>   ....      </GoogleMap>
  ....
  <BoxList>
     <Box>(lazy loaded 'n' at a time as you scroll and hit bottom, upto 400) 
       ......(Some other box info that needs to be updated incrementally)
       <ItemList>
         <Item> (Upto 20 per Box/ItemList)
           ......(Some item Info that needs to be updated incrementally)
         </Item> 
         <Item>...</Item>
         ....  
       </ItemList>   
     </Box>
     <Box>....</Box>
     ....
  </BoxList>
</Page>

在页面加载时，当用户向下滚动时，最顶层的组件（Page）将获取下一个'n'（例如10）Box的json，并且数据将全部传递（Box > ItemList > Item）作为props的方式，它们会被渲染。

我们还通过pusher接收小的增量更新，这些更新需要在Box和Item组件到达时应用。由于我们不确定如何使用React方式，我们正在以Item的方式执行此操作。

a）项目组件没有任何状态，因为React文档建议将状态移动到直接共享父/祖先组件中。

b）getInitialState()中的ItemList只是克隆this.props以生成其初始状态。 this.props从未在渲染函数中使用，它仅依赖于this.state来渲染。

c} componentDidMount() ItemList为Pusher更新设置了侦听器，处理程序只执行setState({ data: data.merge(incremental_update)})触发重新渲染，然后将新数据传递给{{1新的Item并重新呈现。

由于页面上有很多项目列表（最多400个），并且props从未真正使用this.props到ItemList，因此实现此目的的更好方法是什么？？与我们最初的mutate-the-dom-with-jquery实现（加载所有框时大约50 MB）相比，这个应用程序使用几乎两倍的内存（加载所有框时为100 MB），并且在瘦客户端上变得无法使用。

A related question这是此问题的前提。

getInitialState（）=＆gt;克隆（道具）？

0 个答案: