使用 Mobx 中的 useObserver 注意的渲染问题

[SevenChan07]

一个简单的点击监听变化事件的两种写法。

写法一：

import React from 'react'
import {Provider, inject} from 'mobx-react'
import {useObserver, useLocalStore} from 'mobx-react-lite'

const Child = () => {
  return (
    <div>
      {console.log('------Child 渲染--------')}
      This is a Child
    </div>
  )
}

const IdChild = inject('store')(({store}) => {
  return useObserver(() => (
    <div>
      {console.log('------id 渲染-----')}
      {store.id}
    </div>
  ))
})

export default () => {
  const store = useLocalStore(() => ({
    id: 0,
    add: () => {
      store.id += 1
    },
  }))

  return (
    <Provider store={store}>
      <div className="p16">
        <button type="button" onClick={() => store.add()}>点击</button>
        <IdChild />
        <Child />
      </div>
    </Provider>
  )
}

写法二：

import React from 'react'
import {Provider, inject} from 'mobx-react'
import {useObserver, useLocalStore} from 'mobx-react-lite'

const Child = () => {
  return (
    <div>
      {console.log('------Child 渲染--------')}
      This is a Child
    </div>
  )
}

export default () => {
  const store = useLocalStore(() => ({
    id: 0,
    add: () => {
      store.id += 1
    },
  }))

  return (
    <Provider store={store}>
      <div className="p16">
        <button type="button" onClick={() => store.add()}>点击</button>
        {
          useObserver(() => (
            <div>
              {store.id}
            </div>
          ))
        }
        <Child />
      </div>
    </Provider>
  )
}

两种写法看起来效果上没有区别，不过在渲染上有很大不同。
写法一，点击按钮，数据增加之后不会引起 Child 组件的渲染，而写法二，会导致其渲染。
使用 react-dev-tools 能看到渲染的显著差别。

所以在使用中，考虑性能问题，将 useObserver 放到子组件，再将 store 注入进去，这样方法更好。