tarojs中自定义组件使用id的问题

1. 公共组件如下：

const Component = memo(({ fun }) => {
  return (
    <Button onClick={fun} id='btn'>
      点击我
    </Button>
  )
})

export default Component

2. page1页面

import Component from '@/components/test-component'
import { navigateTo } from '@tarojs/taro'

export default function TestPage() {
  const fun1 = useCallback(() => {
    console.log('---testpage1111111111111----')
  }, [])
  return (
    <View>
      page: page1
      <Button
        onClick={() =>
          navigateTo({
            url: '/pages/test-page2/index'
          })
        }
      >
        to page2
      </Button>
      <Component fun={fun1} />
    </View>
  )
}

3. page2页面

import Component from '@/components/test-component'

export default function TestPage() {
  const fun1 = useCallback(() => {
    console.log('---testpage222222222----')
  }, [])
  return (
    <View>
      page: page2
      <Component fun={fun1} />
    </View>
  )
}

代码比较简单，在page1页面点击组件里面的按钮应该是打印---testpage1111111111111----，首次进入page1页面打印符合预期，然后点击to page2页面，点击page2页面组件中的按钮，打印---testpage222222222----，还是符合预期，但是当返回到page1页面后，再次点击打印，发现调用的还是page2页面的函数，也就是打印---testpage222222222----，debug半天，发现是因为给组件的按钮加了id的原因，因为加了id，小程序的dom不会重新渲染，所以就会导致这个问题，去除id就符合预期了。