如何在功能组件和钩子中使用 AppState？有必要还是我错误地使用了 useEffect？答案

【问题标题】：how to use AppState in a functional component and hooks? Necessary or am I using useEffect incorrectly?如何在功能组件和钩子中使用 AppState？有必要还是我错误地使用了 useEffect？
【发布时间】：2020-04-29 14:18:19
【问题描述】：

我希望能够在用户进入应用程序时运行一个函数。我认为 useEffect 已经做了这样的事情，比如如果我选择更改手机的剪贴板（从另一个应用程序复制不同的文本）。但它不会重新渲染组件。

const [clipped, setClipboard] = useState();
const [appView, setAppView] = useState(AppState.currentState);

const getFromClipboard = useCallback(() => {
  Clipboard.getString().then(content => {
    console.log('content:', content)
    setClipboard(content);
  });

}, [clipped]);

useEffect(() => {
  getFromClipboard();
}, [getFromClipboard, clipped, appView]);

我会假设每次我从不同的应用程序复制一个新文本到我的剪贴板，然后我回到这个应用程序，因为剪辑中的状态发生了变化，它会重新呈现 useEffect？不幸的是，它在第一次初始加载组件后没有调用控制台日志。

我偶然发现了 AppState，并认为我可以尝试一下，但不确定如何使用 useEffect 进行设置？

【问题讨论】：

标签： ios reactjs react-native react-hooks

【解决方案1】：

您可以为应用程序状态更改设置一个事件监听器，当应用程序关闭、移动到后台或前台时触发，您可以查看文档以获取更多详细信息link：

useEffect(() => {
  AppState.addEventListener('change', handleChange);  

  return () => {
    AppState.removeEventListener('change', handleChange);  
  }
}, []);


const handleChange = (newState) => {
  if (newState === "active") {
    getFromClipboard();
  }
}

【讨论】：

请记住，如果您要多次删除和设置侦听器，例如。删除失去焦点并添加焦点恢复，您应该使用单个 ref 来引用侦听器，否则每次您将设置一个新的侦听器并且删除所有侦听器会变得有点困难。
一般提示：您应该在使用前定义 handleChange 函数。当您在 react 功能组件中按此顺序定义事物时，可能会发生奇怪的事情。