React Native封装组件页面导航时重复重渲染问题排查

问题背景 #

使用React Native开发安卓应用时，所有通过Stack.Screen注册的函数式页面，在页面导航切换时，外层包裹的Container组件会重复重渲染2次，组件内引入的usePdaScan自定义Hook也会重复触发；而作为首页的类组件使用相同Container包裹时，仅渲染1次，表现正常。

相关代码实现 #

封装的通用容器组件 Container.android.js #

const Container = props => {
  useEffect(() => {
    // 从AsyncStorage拉取数据
  },[])

  // 调用PDA扫码自定义Hook
  const {code, error} = usePdaScan({ 
    onEvent: (code) => {
        // 通过useState更新组件状态
    }, 
    onError: (error) => { 
        Alert.alert('Error', error); 
    }, 
    trigger: 'always'
  });

  return <View>
  {props.children}
  </View>
}

路由声明示例 #

<Stack.Screen name="Overview" component={Overview} />

函数式页面示例（存在重复渲染问题） #

const Overview = props => {
   return <Container>
        <Text>Overview page</Text>
   </Container>
}

类组件首页（渲染表现正常） #

class Home extends Component {
  state = {
      productBarcodes: null
  }

  componentDidMount(){
      // 从AsyncStorage拉取条码数据
      getData('@productBarcodes').then(res => {
          this.setState({
              ...this.state,
              productBarcodes: JSON.parse(res)
          })
      })
  }

  render() {
      const { productBarcodes } = this.state;
      return (
          <Container {...this.props}>
              <View style={{marginBottom: 20, flex:1}}>
               {productBarcodes.length} Products
              </View>
          </Container>
      )
  }
}

根因定位与修复方案 #

1. 优先排查：React 严格模式导致的开发环境双渲染 #

这是和你当前现象匹配度最高的诱因：React Native 0.68及以上版本默认在入口开启StrictMode，开发环境下会对函数式组件执行两次渲染、对Hooks的执行逻辑做双重调用，用来检测不符合预期的副作用代码；而类组件的生命周期逻辑不会被严格模式触发双调用，刚好对应你遇到的「类组件正常、函数组件双渲染」的表现。

• 验证方式：在Container组件函数体入口、内部useEffect入口添加打印日志，如果是严格模式导致的问题，开发环境会看到两次日志输出，打release生产包后重复渲染会自动消失，不影响线上逻辑。
• 处理建议：如果确认是严格模式导致，不需要额外修改业务代码，只需要确保自定义HookusePdaScan内部的事件监听、订阅逻辑有正确的清理返回值即可，避免内存泄漏。如果需要临时关闭，直接移除入口文件index.js中根组件外层的<React.StrictMode>标签即可，不推荐长期关闭。

2. 高频诱因：Hook入参引用不稳定触发内部重复更新 #

你在调用usePdaScan时传入的配置对象是在组件渲染阶段临时创建的，每次组件渲染时这个对象的引用地址都会变化，如果usePdaScan内部没有对入参做记忆化处理，会将新对象识别为配置变更，重复执行扫码监听逻辑、更新内部状态，反过来触发组件重渲染，形成循环。

• 修复方式：用useCallback缓存回调函数、useMemo缓存传入Hook的配置对象，保证引用稳定：

const Container = props => {
  useEffect(() => {
    // 从AsyncStorage拉取数据逻辑
  },[])

  // 缓存扫码成功回调
  const handleScanSuccess = useCallback((code) => {
    // 原有状态更新逻辑
  }, [/* 填入回调依赖的状态变量 */])

  // 缓存扫码失败回调
  const handleScanError = useCallback((error) => {
    Alert.alert('Error', error);
  }, [])

  // 缓存传给usePdaScan的配置对象
  const scanConfig = useMemo(() => ({
    onEvent: handleScanSuccess,
    onError: handleScanError,
    trigger: 'always'
  }), [handleScanSuccess, handleScanError])

  const {code, error} = usePdaScan(scanConfig);

  return <View>
  {props.children}
  </View>
}

3. 导航机制影响：Stack导航状态变更触发全栈页面重渲染 #

React Navigation的Stack导航默认会保留栈内所有已加载页面的实例，导航状态切换时会给栈内所有页面传递最新的navigation、route props，如果组件没有做渲染优化，会触发子组件树的重渲染。

• 优化方式：给Container组件包裹React.memo做浅比较记忆化，避免无意义的重渲染：

const Container = React.memo(props => {
  // 原有Container逻辑保持不变
})

内容的提问来源于stack exchange，提问作者Nenad Kaevik