防止元素在 React Native 中的 setState 上重新渲染答案

【问题标题】：Prevent an element from rerendering on setState in React Native防止元素在 React Native 中的 setState 上重新渲染
【发布时间】：2020-11-01 20:53:19
【问题描述】：

我正在使用setState 以便在 React Native 中按下按钮时动态更新图像的源。不过，我也在使用 TypeWriter 库，它可以用特殊的“打字机”动画效果输入文本。

当调用我的 setState 来更改元素并重新呈现页面时，TypeWriter 会再次输入文本。我不想要这个。有没有办法让我的 TypeWriter 文本不被重新渲染？

代码sn-p：

export const AccountScreen = ({ navigation }) => {

this.state = {
  img1Src: require('../assets/img/token.png')
}

const [state, setState] = useState(this.state);

changeImgSrc = () =>{
  setState({
    img1Src: require('../assets/img/X2.png')
  })
}

return (
        <TypeWriter> //I don't want this to re-render on setState
          <Text>My Account</Text>
        </TypeWriter>

        <Animatable.Image source={state.img1Src}/>

        <Button onPress={this.changeImgSrc}>
            Click me!
        </Button>

etc...//

【问题讨论】：

标签： react-native setstate use-state

【解决方案1】：

export const NewComponent = ({ navigation }) => {

const [state, setState] = useState({
  img1Src: require('../assets/img/token.png')
});

changeImgSrc = () =>{
  setState({
    img1Src: require('../assets/img/X2.png')
  })
}

return (
    <Animatable.Image source={state.img1Src}/>

    <Button onPress={this.changeImgSrc}>
        Click me!
    </Button>
    etc...//

你可以制作一个新的组件叫做NewComponent。那么，

export const AccountScreen = ({ navigation }) => {

return (
    <TypeWriter> //I don't want this to re-render on setState
      <Text>My Account</Text>
    </TypeWriter>
    <NewComponent />
 etc...//

此外，您不能在功能组件中使用它。另外，如果要调用函数式组件中的函数，必须配合useCallback使用。

【讨论】：