Question

我正在研究一个表组件。当我在<tbody />上向左和向右滚动时，我希望它更新<theader />的xOffset，它位于一个单独的组件中，我将调用<Header Component />。这是结构：

<Parent Component >
    <Header Component />
    <Very Expensive Body divs/>
    <Very Expensive Body divs/>
    <Very Expensive Body divs/>
</Parent Component >

滚动侦听器位于父组件上，xOffset是父组件状态的一部分。当我向左和向右滚动时，它也会重新渲染非常昂贵的重新渲染主体组件。

我可以选择重新呈现标题组件吗？

1）使用Redux和选择器。父组件将xOffset调度到app状态，<Header Component />只在选择器上侦听它。看起来像是矫枉过正......

2）我将所有<Very Expensive Body Comp divs >分解为它们自己的组件，并使用ShouldComponentUpdate，以便除了xOffset之外所有内容都保持不变，它不会重新呈现。这似乎有点矫枉过正，但我觉得我将要处理同样的问题，因为我必须将滚动侦听器放在这个新组件上......然后使用父组件作为中介。 .of。

还有第三个更优雅的解决方案吗？

我希望有一种方法可以将函数传递给<Header Component />，这样当父组件向左和向右滚动时，它会使用该函数更新<Header Component />的状态，这会导致只是它重新渲染。

Answer 1

选项编号2！将非常昂贵的div标签分解为各自的组件并使用shouldComponentUpdate。将所有元素保留在一个render()函数中并不会像您开始看到的那样很好地扩展。使用React的全部好处是，您可以创建简单，可重用的组件，并使用这些组件构建更复杂的UI。您似乎打算将所有内容保留在一个组件中，但这实际上是React中的反模式。

但是，不为每个组件添加新的滚动侦听器。相反，只需将它保存在父组件上就像你正在做的那样，并将滚动值作为prop传递给所有新组件。如果他们只需要在滚动了一定数量的屏幕后进行更改，您就可以在每个孩子的shouldComponentUpdate功能中更新它。

Answer 2

如果我理解正确，可以选择以下方式：

<Parent Component >
    <Header Component />
    { this.getVeryExpensiveBodyDivs() }
</Parent Component >

让getVeryExpensiveBodyDivs第一次生成并缓存div，然后只要它们在缓存中就可以从缓存中访问它们。缓存只是一个实例变量（this.cachedVeryExpensiveBodyDivs）。

然后，在您的表格组件的componentWillReceiveProps中，您可以检查是否有任何道具正在改变，这些道具会影响非常昂贵的身体div。如果prop更改应该影响非常昂贵的body div，请清除缓存。下次调用getVeryExpensiveBodyDivs时，它将重新生成并重新缓存div。

React - 重新呈现一个子组件的优雅方式？

2 个答案: