Question

因此我将功能作为道具发送到了我的一个选项卡，但是现在该选项卡被销毁并在每次调用该函数时重新呈现。

我已经把shouldComponentUpdate（）弄得一团糟，因为调用该函数时组件被破坏了。

我应该怎么做？有问题的功能是“购买”。谢谢！

  <Tab.Screen
     name="Buy"
     component={() => (
     <Buy addToCartParent={(newCartNum) => this.addToCart(newCartNum)} />
     )}
   />
   <Tab.Screen name="About" component={About} />


...


addToCart(newCartNum) {
    this.setState({
      cartNum: newCartNum,
    });
  }

Answer 1

我不知道您想要实现什么，但是请尝试为您提供帮助。最好不要在渲染中使用lambda函数，因为每次react都会创建一个新对象，这意味着要进行更多的重新渲染，并且在这种情况下，所有react的魔术都会丢失。但就您而言，也许您可以这样：

制作一个单独的渲染器：

renderBuyComponent() {
  return (
    <Buy addToCartParent={this.addTocart} />
  )
}

addToCart = (newCartNum) => {
  this.setState({
     cartNum: newCartNum,
  });
}


return (
  <Tab.Navigator>
    <Tab.Screen name="Buy" component={this.renderBuyComponent()} />
    <Tab.Screen name="About" component={About} />
  </Tab.Navigator>
)

react-native：如何阻止选项卡重新渲染？

1 个答案: