如何在功能组件和钩子中使用 AppState？必要还是我使用 useEffect 不正确？

Question

我希望能够在用户进入应用程序时运行一个函数。我认为 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 设置它？

Answer 1

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

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

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


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