React（Next.js）性能提示（使用滚动处理程序在应用程序中更新UI状态）

Question

我正在开发一个复杂的项目，涉及禁用浏览器内滚动和模拟滚动，该组件具有一堆基于wheel / touchmove deltaX更新的计算逻辑（在下面的react-dev-tools图片中突出显示）。最重要的是，它将此数据传递给react-motion，操纵包裹{ this.props.children }的'scroll-tray'元素的transform3d css。但它也与redux连接并传递了大量数据，以便在应用程序周围使用。

除了'scroll-tray'包装器上的css转换之外，'ScrollOMatic'组件的背景颜色在scroll-data-reducer的每个增量处更新，并且组件被重新渲染。很贵。

是否有更高效的方法来处理所有这些？

我唯一能想到的就是以某种方式传递一个组件，在“背景”中，改变颜色，而不是用{ this.props.children }来改变一些东西。但这实际上有帮助吗？在下面有一个单独的div，它将背景颜色渲染到较高组件的手上？像这样：

但是由于css变换，ScrollOMatic仍会在树下重新渲染到整个应用程序，是吗？我没有看到解决这个问题的方法，因为整个问题是它实际上是移动应用程序的整个嵌套内容，就好像页面正在滚动一样。

任何想法都会受到超级赞赏！对React优化没有多少经验，特别是对树中这么高的东西并没有快速更新。

Answer 1

如果我理解你的问题，我认为你的问题是你有一个包装器组件，它在鼠标的滚动条上呈现，这使得所有孩子都做了渲染。您的问题在于您指定的渲染：

  

除了滚动托盘上的css转换＆＃39;包装，＆＃39; Scrollomatic＆＃39;组件的背景颜色在滚动数据减少器的每个增量上更新，并且组件被重新渲染。很贵。

在optimizing-performance的链接中阅读全部内容，shouldComponentUpdate In Action部分将为您提供帮助。此链接也很好when-to-rerender

  

其他事项您的第一个倾向可能是在您的应用中使用refs“让事情发生”。如果是这种情况，请花一点时间，更关键地考虑组件层次结构中应该拥有状态的位置。通常，很明显，“拥有”该状态的适当位置在层次结构中处于更高级别。有关此示例，请参阅Lifting State Up指南。

请勿尝试使用ref属性refs-and-the-dom

Answer 2

经过长时间的故障排除和一些经验测试以及来自反应松弛通道的几个开发人员的帮助后，了解到{ this.props.children }在这种情况下不会自动重新渲染。宇！

如果组件作为更新组件的显式直接子项传递并通过更改道具，则子项内的shouldComponentUpdate()是适当的解决方案。

由于此应用程序的结构，实际上对深层嵌套组件的渲染没有影响。

tl;博士：

<ParentComponent> <ChildComponent someProps={this.state.whatever} /> // will re-render (at least if passed dynamic props) </ParentComponent>

！==

<ParentComponent> { this.props.children } // will not re-render (in this use case props passed via react-redux connected component ) </ParentComponent>