react-native-router-flux状态修改后当前屏幕重复渲染问题

我来帮你搞定这个问题！你遇到的屏幕重新渲染问题，主要有两个核心原因：

• 你传递给Scene的renderMenuButton函数，每次父组件触发render时都会被重新创建，导致子组件（Services、Profile）接收到新的props，从而触发重渲染
• 父组件调用setState会触发自身重新渲染，进而带动所有关联的Scene组件跟着重渲染

下面是具体的解决步骤：

1. 确保showMenuIcon函数的引用稳定 #

对于类组件来说，有两种可靠的方式实现：

方式一：在构造器中绑定函数 #

通过提前绑定，确保每次组件render时函数的引用保持不变：

constructor(props) {
  super(props);
  this.state = { viewMenu: false };
  // 绑定函数，固定引用
  this.showMenuIcon = this.showMenuIcon.bind(this);
}

showMenuIcon(value) {
  this.setState({ viewMenu: value });
}

方式二：使用类属性箭头函数 #

箭头函数会自动绑定this，而且在组件生命周期内引用始终稳定：

showMenuIcon = (value) => {
  this.setState({ viewMenu: value });
}

2. 让子组件仅在必要时重渲染 #

我们可以把Services和Profile设置为"纯组件"，它们只会在props或state真正发生变化时才重新渲染：

如果是类组件：继承PureComponent #

import React, { PureComponent } from 'react';

class Services extends PureComponent {
  // 你的组件逻辑代码
}

class Profile extends PureComponent {
  // 你的组件逻辑代码
}

如果是函数组件：用React.memo包裹 #

import React from 'react';

const Services = React.memo((props) => {
  // 你的组件逻辑代码
});

const Profile = React.memo((props) => {
  // 你的组件逻辑代码
});

额外优化思路 #

如果viewMenu状态仅仅是Menu组件需要用到的，你可以考虑把这个状态移到Menu组件内部管理——这样父组件就不需要维护这个状态，也就不会因为setState触发自身和子组件的重渲染了。当然如果这个状态是父组件或其他组件也需要共享的，那前面的方法就足够解决问题。

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