React Native：如何检测功能组件将卸载？答案

【问题标题】：React Native:How to detect function component will unmount?React Native：如何检测功能组件将卸载？
【发布时间】：2020-07-25 00:51:30
【问题描述】：

我的 RN 0.62.2 应用程序需要在函数组件卸载之前自动保存页面数据。这个想法是，当用户关闭页面时（检测失去焦点可能在这里不起作用，因为用户可以在模式屏幕中放大图像），然后自动触发保存（到后端服务器）。既然是函数组件，那么如何知道组件什么时候卸载呢？

这是一个功能组件的示例代码应该做的：

    const MyCom = () => {
    
      //do something here. ex, open gallery to upload image, zoon in image in `modal screen,  enter input`
    
      if (component will unmount) {
        //save the data by sending them to backend server
      }
    }

useEffect 每次渲染都会触发，如果每次渲染都保存到后端服务器，则会出现性能问题。自动保存仅在组件卸载之前发生一次。用户可以点击Back或Home按钮离开页面。

【问题讨论】：

返回useEffect 和一个空数组[] 作为依赖项只会在组件卸载时触发一次。
Tony Nguyen，你的意思是useEffect 中带有第二个变量 [] 的清理功能将在组件卸载后触发？我知道 [] 在初始渲染后只执行一次useEffect。
是的。但是，如果使用状态 React 的函数仍然建议您在依赖项中拥有该状态，它仍然取决于您在“保存数据”函数中拥有的内容。在这种情况下，您可能想要使用useReducer 而不是useState。请提供您的保存数据功能详细信息以获得更好的帮助。
保存是将表单数据发送回远程后端服务器进行更新。这些表单数据都是由useState定义的，有10个字段。还有一个数组状态fieldUpdatedList，用于跟踪所有已更改的字段。最初呈现组件时，fieldUpdatedList 为空。但是，如果卸载组件时fieldUpdatedList 不为空，则此状态和所有相关字段状态将一次性发送到后端服务器进行更新。

标签： react-native react-hooks

【解决方案1】：

你必须在功能组件中使用 useEffect for componentWillUnmount。

const MyCom = () => {

  //do something here. ex, open gallery to upload image, zoon in image in 

  useEffect(() => {
    // Component Did Mount

    return => {
      // ComponentWillUnmount
    }
  },[])

  return(/*Component*/)
}

【讨论】：