React Navigation：同StackNavigator下跳转页面时组件持续重渲染问题

你好，结合你提供的环境信息和遇到的问题——在同一个StackNavigator中跳转时组件持续重渲染，我整理了几个常见的排查方向和解决方案，都是react-navigation 1.x版本里容易踩的坑：

1. 检查StackNavigator的Header配置是否用了匿名函数/动态组件 #

在react-navigation 1.x里，如果在navigationOptions里用匿名函数或者动态创建的组件定义header相关属性（比如headerTitle、headerLeft），每次路由切换时Header都会被重新创建，进而触发页面组件的不必要重渲染。

错误示例： #

const BillStack = StackNavigator({
  Bill: {
    screen: Bill,
    navigationOptions: {
      // 匿名函数定义headerTitle，每次都会生成新组件
      headerTitle: () => <Text>账单页</Text>,
      headerLeft: () => (
        <TouchableOpacity onPress={() => {}}>
          <Text>返回</Text>
        </TouchableOpacity>
      )
    }
  },
  CompletedBill: { screen: CompletedBill }
});

修复方式： #

把Header相关组件提前定义成独立的组件，避免在navigationOptions里用匿名函数：

// 提前定义好Header组件
const BillHeaderTitle = () => <Text>账单页</Text>;
const BillHeaderLeft = ({ navigation }) => (
  <TouchableOpacity onPress={() => navigation.goBack()}>
    <Text>返回</Text>
  </TouchableOpacity>
);

const BillStack = StackNavigator({
  Bill: {
    screen: Bill,
    navigationOptions: {
      headerTitle: BillHeaderTitle,
      headerLeft: BillHeaderLeft
    }
  },
  CompletedBill: { screen: CompletedBill }
});

2. 用PureComponent或自定义shouldComponentUpdate控制重渲染 #

如果你的页面组件是普通的Component，它默认会在props/state有变化时重渲染，但如果props里的引用类型（比如对象、数组）每次都是新的引用（哪怕内容没变化），也会触发重渲染。

解决方案： #

• 直接把组件改成继承PureComponent（它会做浅比较，只有props/state的实际值变化时才重渲染）：

import React, { PureComponent } from 'react';
import { View, Text } from 'react-native';

class Bill extends PureComponent {
  render() {
    console.log('Bill组件渲染了');
    return (
      <View>
        <Text>账单页面</Text>
      </View>
    );
  }
}

• 如果需要更精细的控制，手动实现shouldComponentUpdate，用深比较判断内容是否真的变化：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import _ from 'lodash'; // 借助lodash的isEqual做深比较

class Bill extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 只有当props或state的内容真的变化时，才允许重渲染
    return !_.isEqual(this.props, nextProps) || !_.isEqual(this.state, nextState);
  }

  render() {
    console.log('Bill组件渲染了');
    return (
      <View>
        <Text>账单页面</Text>
      </View>
    );
  }
}

3. 别在render方法里动态创建函数/对象/组件 #

如果在组件的render里临时创建函数、对象或者组件，每次render都会生成新的引用，哪怕内容没变，也会触发自身或子组件的重渲染。

错误示例： #

class Bill extends Component {
  render() {
    // 每次render都新建一个onPress函数
    const onPress = () => this.props.navigation.navigate('CompletedBill');
    // 每次render都新建一个billData对象
    const billData = { id: 1, name: '测试账单' };

    return (
      <View>
        <Button onPress={onPress} title="查看已完成账单" />
        <BillDetail data={billData} />
      </View>
    );
  }
}

修复方式： #

• 把函数定义成类的方法（用箭头函数绑定this，避免每次新建）：

class Bill extends Component {
  // 类属性箭头函数，只会创建一次
  onPress = () => this.props.navigation.navigate('CompletedBill');

  render() {
    // 静态数据提前定义在组件外，动态数据从props/state取
    const billData = this.props.billData;

    return (
      <View>
        <Button onPress={this.onPress} title="查看已完成账单" />
        <BillDetail data={billData} />
      </View>
    );
  }
}

4. 检查跳转时传递的Navigation Params #

如果跳转时传递的params是动态生成的对象/数组（比如每次跳转都新建一个对象），目标页面的this.props.navigation.params会每次都是新引用，触发重渲染。

错误示例： #

// 在Bill页面跳转时
this.props.navigation.navigate('CompletedBill', {
  filter: { status: 'completed' } // 每次跳转都新建filter对象
});

修复方式： #

• 静态params提前定义成常量：

// 定义在组件外部的常量
const COMPLETED_FILTER = { status: 'completed' };

// 跳转时直接用常量
this.props.navigation.navigate('CompletedBill', {
  filter: COMPLETED_FILTER
});

• 如果是动态数据，在目标页面里对params做缓存，或者用shouldComponentUpdate判断params的实际内容是否变化。

5. 排查是否有不必要的state更新 #

有时候组件内部的state被频繁更新（比如在componentWillReceiveProps里错误地设置state），也会导致持续重渲染。可以加日志排查：

componentWillReceiveProps(nextProps) {
  console.log('Bill组件收到新props:', nextProps);
  // 只有当关键数据真的变化时才更新state
  if (nextProps.billList !== this.props.billList) {
    this.setState({ billList: nextProps.billList });
  }
}

你可以按照上面的顺序逐一排查，先从Header配置开始，这是react-navigation 1.x里最常见的重渲染诱因。如果问题还没解决，可以在组件的render里加console.log打印props和state，看看具体是什么变化触发了重渲染。

内容的提问来源于stack exchange，提问作者Mark Thien