你如何使 this.forceUpdate() 应用于 React Native 中的整个应用程序？答案

【问题标题】：How do you make this.forceUpdate() apply to entire app in React Native?你如何使 this.forceUpdate() 应用于 React Native 中的整个应用程序？
【发布时间】：2019-02-25 15:40:42
【问题描述】：

我有一个 React Native 应用程序，我想在每个屏幕上放置一个按钮，用户可以单击该按钮来强制重新渲染（使用 this.forceUpdate()）。在每个屏幕上，我在顶部都有一个自定义 <Header> 组件，我想将重新渲染按钮放在该标题中，因为它出现在每个屏幕上，因此我只需要添加一次按钮。

所以我的一个屏幕看起来像这样：

export default class Screen1 extends Component {
  render() {
    return(
      <View>
        <Header>
        ...rest of screen...
      </View>
    )
  }
}

而Header 看起来像这样

export default class Header extends Component {
  render(){
    return(
      <View>
        <TouchableOpacity
          onPress={() => this.forceUpdate()}
        />
      </View>
    )
  }
}

单击标题中的<TouchableOpacity> 会导致标题本身更新，但不会更新整个屏幕。我假设this.forceUpdate() 仅适用于定义<TouchableOpacity> 的组件。所以我的问题是，是否有任何等效的 this.forceUpdate() 可以在我的标题中调用来强制重新渲染整个屏幕？

谢谢！

【问题讨论】：

我建议不要这样做。无需强制更新应用程序。您需要做的就是更新道具或状态，这取决于您的架构。如果您想在所有屏幕的自定义标题中应用渲染，我会使用redux.js.org。您可以创建一个更新应用程序状态的操作。您只需将Header 连接到商店，它就会自行处理重新渲染，因为道具已更改。
@parohy 感谢您的 Redux 建议。我已经在应用程序中大量使用 Redux，所以我会尝试找到使用它的解决方案。我知道我问的是一个坏主意。这是一个临时黑客。热重载一直没有工作，我花了太多时间试图修复它，所以我正在做一个临时黑客，以便能够在截止日期前做一些快速的 UI 更新，然后会继续挖掘之后深入问题的根源（并删除黑客）。

标签： javascript reactjs react-native rendering

【解决方案1】：

正如@parohy 所建议的那样，这根本不是要走的路。
但是有一个临时技巧，您可以将 this.forceUpdate() 作为道具传递给标题。
看起来像这样：

 export default class Screen1 extends Component {
  render() {
    return(
      <View>
        <Header forceUpdate={this.forceUpdate}>
        ...rest of screen...
      </View>
    )
  }
}
export default class Header extends Component {
  render(){
    return(
      <View>
        <TouchableOpacity
          onPress={() => this.props.forceUpdate()}
        />
      </View>
    )
  }
}

【讨论】：