反应 - 优雅的方式来重新渲染只有一个孩子组件？

Question

我正在研究一个表格组件。当我左右滚动的<tbody />我希望它更新的只是<theader />这是一个单独的组件，我会打电话<Header Component />的X偏移。结构如下：

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

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

什么是我的只是标题组件重新渲染选项？

1）使用终极版和选择。父组件将xOffset分派到应用程序状态，<Header Component />只在选择器上侦听。看起来像是过度杀伤...

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

是否有第三种更好的解决方案？

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

Answer 1

选项编号2！把你非常昂贵的div标签分解成他们自己的组件，并使用shouldComponentUpdate。保持一个render()函数内的所有元素不会像您开始看到的那样好。使用React的全部好处是您可以创建简单的可重用组件并使用这些组件构建更复杂的UI。您似乎有意将所有内容都保存在一个组件中，但这实质上是React中的反模式。

然而，做不一个新的滚动监听器添加到每个组件。相反，只需像你一样将它保留在父组件上，并将滚动值作为道具传递给所有新组件。如果他们只需要在滚动一定数量的屏幕后进行更改，则可以在每个儿童的shouldComponentUpdate功能中更新它。

Answer 2

如果我理解正确的，一个选择是像做：

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

而且具有getVeryExpensiveBodyDivs生成和缓存的div的第一次，然后从高速缓存刚刚访问它们之后，如果他们在缓存。缓存只是一个实例变量（this.cachedVeryExpensiveBodyDivs）。

然后，在你的表格组件的componentWillReceiveProps，你可以检查任何道具改变了这一切应该影响非常昂贵的身体div的。如果道具变化会影响非常昂贵的身体区域，请清除缓存。下次调用getVeryExpensiveBodyDivs时，它会重新生成并重新缓存div。

Answer 3

如果我理解正确的，一个选择是像做：

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

而且具有getVeryExpensiveBodyDivs生成和缓存的div的第一次，然后从高速缓存刚刚访问它们之后，如果他们在缓存。缓存只是一个实例变量（this.cachedVeryExpensiveBodyDivs）。

然后，在你的表格组件的componentWillReceiveProps，你可以检查任何道具改变了这一切应该影响非常昂贵的身体div的。如果道具变化会影响非常昂贵的身体区域，请清除缓存。下次调用getVeryExpensiveBodyDivs时，它会重新生成并重新缓存div。