Javascript 如何在嵌入式组件中从父级应用一次上下文并更新子级？

我想从context init it创建一个可重用的

MarkerCluster

组件和传单映射，然后提供嵌套映射组件的更新。我不需要将其直接嵌入

MyMap

组件中，以执行

react router

的动态操作，但当

MarkerCluster

具有

shouldComponentUpdate==false

时，嵌套标记将不会更新。我发现这个问题可能与有关，但在我的案例中，我没有发现如何解决这个问题。我仍然相信有比将shouldComponentUpdate设置为true更好的解决方案。你能解释一下我的两个例子在行为上的不同吗？或者以React方式构建无上下文的可重用

MarkerCluster

组件是更好的解决方案

演示：

const React=window.React；
const{Map，TileLayer，Marker，MapLayer，PropTypes}=window.react传单；
const{markerClusterGroup}=window.L；
类MarkerCluster扩展了MapLayer{
静态childContextTypes={
layerContainer:PropTypes.layerContainer
};
getChildContext（）{
返回{
layerContainer:this.layerElement
}
}
组件将安装（）{
super.componentWillMount（）
this.fluencement=markerClusterGroup（）
}
shouldComponentUpdate（）{
返回错误
}
渲染（）{
日志（“更新标记群集”）
返回{this.props.children}
}
}
类映射标记扩展了React.Component{
构造函数（）{
超级（）
常量初始状态=[
{位置：[51.5，-0.1]}，
{位置：[51.51，-0.1]}，
{位置：[51.49，-0.05]}，
]
this.state={markers:initialState}；
}
componentDidMount（）{
setInterval（this.addMarker.bind（this），3000）；
}
addMarker（）{
常量lat=（Math.random（）*（51.49-51.51）+51.51）；
常数lng=（Math.random（）*（0.05-0.1）-0.1）；
常量标记={position:[lat，lng]}；
this.setState（{markers:this.state.markers.concat（[marker]）}）；
}
render（）{
日志（“更新标记”）
常量标记=this.state.markers.map（（项，键）=>
);
返回{markers}；
}
}
类MyMap扩展了React.Component{
render（）{
返回(
{this.props.children}
)
}
}
类MainLayout扩展了React.Component{
render（）{
返回(
)
}
}
render（，document.getElementById（'container'）
。传单容器{
高度：400px；
宽度：100%；
}
我不知道你为什么要那样做。
您应该首先了解react是如何工作的，以及它是如何执行协调过程的

看看这里，这解释了这个过程：

在这里，您可以阅读有关advanced prefomance的内容，包括有关shouldComponentUpdate以及如何正确使用它的广泛解释：


希望在你读完这篇文章后，你会意识到为什么你想要的是不可能的。
无论如何，您不应该将shouldComponentUpdate实现为返回false，因为它将跳过协调过程中的所有嵌套组件。
检查

这是用于集群标记的最小且轻量级的包装器

资料来源：

1） 包装纸传单图层组：

import {LayerGroup} from 'react-leaflet';

export default class MarkerClusterGroup extends LayerGroup {
    ...

2） 创建新的markerClusterGroup，所有标记将在其中聚集的组：

import 'leaflet.markercluster';

let markerClusterGroup = L.markerClusterGroup(this.props.options);

3） 通过layerContainer将markerClusterGroup作为图层添加到地图（layerContainer可用，因为markerClusterGroup组件扩展了react传单LayerGroup）

这不是componentShouldUpdate的用途。你告诉它不要更新，现在它不更新了。若你们想让它更新，那个么就不要那个样设置钩子。那个么为什么第二个例子是有效的呢？它是有效的。你告诉它不要更新，它也不更新。如果要更新，请不要将该函数设置为返回
false
。我找到了第二个示例有效而第一个示例无效的原因。似乎我想要避免的一个解决方法是在每次标记更改时更新集群组件。有人知道更好的解决办法吗？
this.layerContainer.addLayer(markerClusterGroup);