我已经尝试使项目与列表的咖啡馆和标记在谷歌地图他们的位置。
想法是点击place来选择咖啡馆，然后-选择合适的标记，反之亦然（点击标记-在列表中选择合适的咖啡馆）
我有嵌套组件的层次结构，如：
< App>:
<List>
<place1>
<place2>
....
<place10>
</List>
<Map>
<marker of place1/>
<marker of place2/>
...
<marker of place10/>
</Map>
</App>
我可以做一个简单的方法，只需在顶级父应用程序的可变内部状态中保留所选咖啡馆的信息。
但我不想渲染整个组件树——这对浏览器来说是一个很大的工作。
我可以保持集中的值在每个子组件的状态pleX和markerX。因此，当我单击某个位置X是切换到焦点：真，并通过父母列表中的函数发送到下一个上一个组件到焦点：假。所以-它只有2个子组件要重新渲染。
但如何激发子组件中的更改-在下一个分支中：？
但我不想渲染整个组件树——这对浏览器来说是一个很大的工作。
您只需要将适当的属性传递给每个组件并使用extends。PureComponent以确保在道具中没有任何更改的情况下不会重新渲染组件。
想象一下，您的应用状态中有焦点属性，它等于实际上是焦点的X。因此，您不应该粗略地将其传递给所有组件（因为它们将重新呈现每个焦点更改），但您应该计算适当的属性，即is焦点=state.focused==X。
然后，它将重新渲染两个组件—下一个聚焦的组件和前一个聚焦的组件。
编辑：
类应用程序
...
updateFocus(x) {
this.updateState('focused', x)
}
render() {
const focused = this.state.focused;
<Map focused={focused} updateFocus={updateFocus} ... />
}
班级地图
...
render() {
const {focused, updateFocus} = this.props;
return <div>
{this.renderMarkerItem(x, focused, updateFocus)}
</div>
}
renderMarkerItem(x, focused, updateFocus) {
const isFocused = focused === x;
return <Marker x={x} focused={focused} updateFocus={updateFocus}>
}
...
反应纯组分vs反应。组成部分
