防止元素在 React Native 中的 setState 上重新呈现

Question

我正在使用 setState 以便在 React Native 中按下按钮时动态更新图像源。但是，我还使用了 TypeWriter 库，它以特殊的 'typewriter' 动画效果键入文本。

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

代码片段：

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...//

Answer 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使用。

防止元素在 React Native 中的 setState 上重新呈现

Prevent an element from rerendering on setState in React Native

setstate

react-native

use-state