Question

所以我有这个课：

class Dimension {
  @observable name

  @observable label

  @observable active

  @observable color

  @observable data = []
}

现在我有一家商店：

class MyStore {
  @observable dimensions = []

  constructor() {
    /** some stuff to fill dimensions **/
  }
}

const MyStoreContext = createContext(new MyStore());

export default MyStoreContext;

在对服务器进行API调用之后，我获取了一些数据并创建了Dimension对象，并将它们放入数组中。

现在我有两个使用这些维度的组件，一个需要数据，另一个不需要数据。

问题是我有一个按钮可以重新计算数据-除此之外没有任何更改，但是因为我这样称呼尺寸：

const component = observer(() => {
  const store = useContext(MyStoreContext);

  const dimensions = store.dimensions;

  return (
    dimensions.map(dimension => <span style={{color: dimension.color}}> dimension.name </span>)
  )
}

const component2 = observer(() => {
  const store = useContext(MyStoreContext);

  const dimensions = store.dimensions;

  return (
    /** Something with dimension.data **/
  )
}

在两个地方，当尺寸上的数据发生变化时（即使我不使用它），该组件仍会重新呈现。

我想知道如何在两个地方都使用尺寸，但是要确保仅呈现必要的东西。

我必须将尺寸作为道具传递给组件吗？

Answer 1

我尝试重现您的行为，但无法做到。一切都会按预期进行，如果仅更改尺寸的data部分，则仅会渲染使用此data字段的组件。

https://codesandbox.io/s/httpsstackoverflowcomquestions63157530-p6fcs?file=/src/App.js

尝试将您的代码与我的代码进行比较，也许存在一些差异？

停止不必要的组件渲染

1 个答案: