时间戳

首页 > 解决方案 > 如何防止 React Native 多次重新渲染

reactjs - 如何防止 React Native 多次重新渲染

问题描述

目前我的组件正在渲染 4 次。看起来它正在为每个道具渲染。如果我删除除网络之外的道具，那么它只会渲染 1 次，但我确实需要其他道具。我在 componentDidUpdate 中使用 if 语句，因为我需要检测更改但是我渲染 4 次并且我的网络道具是相同的

export class Camera extends Component {
  componentDidUpdate(prevProps, prevState){
    if (prevProps.network !== this.props.network){
      this.connect(this.props.network)
      console.log('rendering')
    }
  }
  
  connect=()=>{
    //
  }

  render() {
    return (
      <View>
        <Text>
          Hello World
        </Text>
      </View>
    )
  }
}

export default function (props) {
  return (
    <Camera
      navigation={props.navigation}
      route={props.route}
      network={React.useContext(NetworkContext)}
    />
  );
}

标签： reactjsreact-native

解决方案

默认情况下，每次 props 发生变化时，React 都会重新渲染。这保证了 React 永远不会错过更新。如果您想减少渲染频率，请实现shouldComponentUpdate和自定义验证器：

shouldComponentUpdate(nextProps, nextState) {
  // Compare this.props / nextProps
  // Compare this.state / nextState
  // determine if update is needed
  return true;
}

推荐阅读