Question

我尝试过使项目包含Google MAP中的咖啡馆和标记的位置。

想法是点击地点以选择咖啡馆，然后-选择合适的标记，反之亦然（点击标记-在列表中选择合适的咖啡馆）

我有很多嵌套组件，例如：

< App>:
   <List>
     <place1>
     <place2>
     ....
     <place10>
   </List>
   <Map>
    <marker of place1/>
    <marker of place2/>
   ...
   <marker of place10/>
  </Map>
</App>

我可以通过一种简单的方法来保存信息，即将哪个咖啡馆选择的信息保留在顶级父项-应用的州中。

但是我不想触发所有的组件树，这对于浏览器来说很有用。

我可以在每个子组件 placeX 和 markerX 的状态内保持专注的价值。因此，当我单击某些 placeX 时，将其切换为 focused：true 并通过父级的功能将其发送到下一个上一个组件为 focused：false >列表。因此-仅2个子组件将重新渲染。

但是如何触发子组件中的更改-在下一个分支中？

Answer 1

但是我不想触发所有的组件树，这对于浏览器来说很有用。

您只需要将适当的属性传递给每个组件，并使用extends React.PureComponent来确保如果道具没有任何更改，它不会重新渲染组件。

想象一下，您在应用状态中拥有focused个属性，该属性等于X，而该属性实际上是集中的。因此，您不应将其大致传递给所有组件（因为它们将重新呈现每个焦点更改），但应计算适当的属性，即isFocused = 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}>
}
...

React.PureComponent vs React.Component

如何触发其他组件的更改？

1 个答案: