在React Hooks中的未安装组件上清理内存泄漏

因为这是异步诺言调用，所以您必须使用 一个可变的引用变量（带有useRef） 来检查已卸载的组件，以进行异步响应的下一个处理（避免内存泄漏）：

警告：无法在已卸载的组件上执行React状态更新。

在这种情况下，您应该使用两个React Hook：

useRef

useEffect

useRef

_isMounted

*如果需要可变变量， *useRef 是挂钩。与局部变量不同，React确保在每次渲染期间都返回相同的引用。如果需要，与
类组件中的this.myVar* 相同 *

范例：

const login = (props) => {  const _isMounted = useRef(true); // Initial value _isMounted = true  useEffect(() => {    return () => { // ComponentWillUnmount in Class Component        _isMounted.current = false;    }  }, []);  function handleSubmit(e) {    e.preventDefault();    setLoading(true);    ajaxCall = Inertia.post(window.route('login.attempt'), values)        .then(() => { if (_isMounted.current) { // Check always mounted component    // continue treatment of AJAX response... ; }         )  }}

同时，让我向您解释有关此处使用的React Hooks的更多信息。另外，我将功能组件中的React Hook（反应>
16.8）与类组件中的LifeCycle进行比较。

useEffect ：大多数副作用发生在钩子内部。副作用的示例包括：数据获取，设置订阅以及手动更改DOM
React组件。useEffect替换了类Component中的许多生命周期（componentDidMount，componentDidUpate，componentWillUnmount）

 useEffect(fnc, [dependency1, dependency2, ...]); // dependencies array argument is optional

1. 如果您没有依赖关系，则useEffect的默认行为在第一个渲染 （例如ComponentDidMount） 之后和每个更新渲染 （例如ComponentDidUpdate） 之后运行。就像那样 ：

   useEffect(fnc);

2. 将依赖项数组赋予useEffect将更改其生命周期。在这个例子中：useEffect将在第一个渲染之后被调用一次，并且每次计数改变时

导出默认函数（）{const [count，setCount] = useState（0）;

    useEffect(fnc, [count]);

}

1. 如果将空数组放置为依赖项，则useEffect将在第一个渲染 （如ComponentDidMount） 之后仅运行一次。就像那样 ：

   useEffect(fnc, []);

2. 为了防止资源泄漏，必须在挂钩的生命周期结束时处置所有 组件（例如ComponentWillUnmount） 。例如，对于空的依赖关系数组，将在组件卸载后调用返回的函数。就像那样 ：

useEffect（（）=> {return fnc_cleanUp; //
fnc_cleanUp将取消所有订阅和异步任务（例如：clearInterval）}，[]）；

useRef ：返回 一个可变的ref对象， 其 .current
属性已初始化为传递的参数（initialValue）。返回的对象将在组件的整个生命周期内保持不变。

示例：对于上述问题，我们不能在此处使用局部变量，因为它将在每次更新渲染时丢失并重新启动。

const login = (props) => {  let _isMounted= true; // it isn't good because of a local variable, so the variable will be lost and re-defined on every update render  useEffect(() => {    return () => {        _isMounted = false;  // not good    }  }, []);  // ...}

因此，结合 useRef 和 useEffect ，我们可以完全清除内存泄漏。

您可以阅读更多有关React Hooks的链接：

[ZH] https://medium.com/@sdolidze/the-iceberg-of-react-hooks-
af0b588f43fb

[FR] https://blog.soat.fr/2019/11/react-hooks-par-
lexemple/