Reactjs 如何使用mobx react lite使子组件对mobx中的状态更改作出反应

我使用的是mobx状态树和mobx react lite，有人能帮我找到更好的模式吗

wishlist.js-wishlist商店

从“mobx状态树”导入{types}
export const WishListItem=types.model（'WishListItem'{
名称：types.string，
价格：型号。编号，
图像：“”，
}).行动（自我=>({
更改名称（新名称）{
self.name=newName
},
}))
export const WishList=types.model（'WishList'{
项：types.optional（types.array（WishListItem），[]），可选，
})

root.js-根存储

export const RootStore=types.model（'RootStore'{
计数器：类型。可选（计数器，{count:0}），
愿望列表：类型。可选（愿望列表{
商品：[{图片：''，价格：10，名称：'Yoda'}]
}),
})

我正在更新商店

setInterval（（）=>store.wishList.items[0].changePrice（Math.random（）*100），500）

在我的愿望中 wishlist.jsx

const WishListItem = ({ image, name, price }) => {
  return useObserver(
    () =>
      <div>
        <img src={image} />
        <h3>{name}</h3>
        <h5>{price}</h5>
      </div>
  )
}

const WishListView = ({ items }) => {
  return useObserver(
    () => <>
      {
        items.map(
          (item, key) => <WishListItem {...item} key={key} />
        )
      }
    </>
  )
}

export default () => useObserver(() => (
  <WishListView items={store.wishList.items} />
))

再也不用看孩子了

更新 我发现的一个解决方法是对数组进行分解，现在更改是被动的，因为我们直接访问正在更改的变量

export default () => useObserver(() => {
  const items = store.wishList.items.map(item => ({ ...item }))
  return <WishListView items={items} />
})

export default（）=>useObserver（（）=>{
const items=store.wishList.items.map（item=>（{…item}））
返回
})

再也不用看孩子了

如果可能的话，最好将所有组件标记为

observer

。例如，如果您将每个

项目标记为观察者，并且其中一个项目更改了其名称，则只有此组件将重新渲染。如果你不让
项目
成为观察者，那么你的整个
列表
都会重新排序，如果项目太多或DOM树太深，这是非常糟糕的。当只有一个项目发生变化时，重新提交整个列表也没有意义

请看这里的解释

因此，您的解决方案是一个糟糕的实践，只有在您无法控制子组件并且无法使它们成为
observer
是的，我看到@observer是如何工作的，并且发现useObserver也必须以同样的方式使用，才应该作为最后手段使用，忘记在这里更新。
export default () => useObserver(() => {
  const items = store.wishList.items.map(item => ({ ...item }))
  return <WishListView items={items} />
})