相关疑难解决方法(0)

在我的公司,我们正在将Web应用程序的前端迁移到ReactJS.我们正在使用create-react-app(更新到v16),没有Redux.现在我停留在一个页面上,可以通过以下图像简化结构:

在componentDidMount()MainContainer 的方法中使用相同的后端请求检索由三个组件(SearchableList,SelectableList和Map)显示的数据.然后,此请求的结果将存储在MainContainer的状态中,并且具有或多或少的结构:

state.allData = {
  left: {
    data: [ ... ]
  },
  right: {
    data: [ ... ],
    pins: [ ... ]
  }
}

LeftContainer state.allData.left从MainContainer 接收作为prop ,并props.left.data再次传递给SearchableList作为prop.

RightContainer state.allData.right从MainContainer 接收作为prop ,并传递props.right.data给SelectableList和props.right.pinsMap.

SelectableList显示一个复选框以允许对其项目执行操作.每当在SelectableList组件的项目上发生动作时,它可能对Map引脚有副作用.

我决定在RightContainer状态下存储一个列表,该列表保留SelectableList显示的所有项目ID; 此列表作为道具传递给SelectableList和Map.然后我向SelectableList传递一个回调函数,无论何时进行选择都会更新RightContainer中的id列表; 新的道具到达SelectableList和Map,因此render()在两个组件中都会调用.

它工作正常,有助于保持RightContainer中SelectableList和Map可能发生的一切,但我问这是否适用于提升状态和单一来源的概念.

作为可行的替代方案,我想到为MainContainer中的_selected每个项添加一个属性state.right.data,并将select回调三个级别传递给SelectableList,处理MainContainer中的所有可能操作.但是一旦选择事件发生,这将最终强制加载LeftContainer和RightContainer,引入了实现逻辑的需要,shouldComponentUpdate()以避免无用,render()特别是在LeftContainer中.

从架构和性能的角度来看,哪个/可能是优化此页面的最佳解决方案？

下面是我的组件摘录,以帮助您了解情况.

MainContainer.js

class MainContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      allData: {}
    }; …