时间戳

首页 > 解决方案 > React Native ArrowFunction 针对正常功能（Appstate）

function - React Native ArrowFunction 针对正常功能（Appstate）

问题描述

我试图找出两个函数之间的区别。在我的 react native 应用程序中，我使用 AppState eventlistener 来检查应用程序是在后台还是前台运行（请参见下面的代码）：

AppState.addEventListener('change', this._handleAppStateChange);

该函数如下所示：

  _handleAppStateChange = (nextAppState) => {

      console.log('nextAppState', nextAppState)

      this.setState({
          appState: nextAppState
      });

  };

我不喜欢 te 函数的制作方式，因为在侦听器中调用它时不带参数，但函数本身有参数。所以我想改变它以使其更清楚。这是制作的：

  _handleAppStateChange (nextAppState) {

      console.log('nextAppState', nextAppState)

      this.setState({
          appState: nextAppState
      });

  };

这工作正常，nextAppState 仍然被记录，但 setstate 不再工作，说它不是一个函数。有人可以解释我为什么吗？

有人能解释一下这两种功能中哪一种最好用吗？

多谢！

标签： functionreact-native

解决方案

开始使用箭头函数，创建箭头函数的原因之一是针对您提到的问题，即this在函数上下文中丢失。

因此，为了使您的功能正常工作，您需要将功能绑定到this. 在你的构造函数中添加这一行

this._handleAppStateChange = this._handleAppStateChange.bind(this)

或者您可以替换此功能

AppState.addEventListener('change', this._handleAppStateChange);

至

 AppState.addEventListener('change', (nextAppState) => this._handleAppStateChange(nextAppState));

奖金。如果您需要传递除了 nextAppState 或状态之外的额外参数。这条线行不通

 AppState.addEventListener('change', (nextAppState, this.state.someRandmValue) => this._handleAppStateChange(nextAppState, this.state.someRandmValue));

由于 this.state.someRandomValue 是未定义的，因为 handleAppState 不会发出这个值，而是使用这个

 AppState.addEventListener('change', (nextAppState) => this._handleAppStateChange(nextAppState, this.state.someRandmValue));

推荐阅读