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

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

因为这是异步诺言调用，所以您必须使用一个可变的ref变量（带有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 Hooks（版本React>
16.8）与类组件中的LifeCycle进行比较。

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

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

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

useEffect(fnc);

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

export default function () {   const [count, setCount] = useState(0);   useEffect(fnc, [count]);}

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

useEffect(fnc, []);

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

useEffect(() => {   return fnc_cleanUp; // fnc_cleanUp will cancel all subscriptions and asynchronous tasks (ex. : 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-initiated on every update render  useEffect(() => {    return () => {        _isMounted = false;  // not good    }  }, []);  // ...}

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

---