React Hook 将挂载 - Javascript

React Hook 是 React 16.8 版本新增的特性，它可以让我们在无需编写类组件的情况下，使用状态和其他 React 特性。

当组件被挂载到 DOM 上时，我们可以使用 useEffect 这个 Hook 来执行副作用操作。

useEffect Hook

语法

useEffect(effect, dependencies)

useEffect 接收两个参数：第一个参数是一个函数，用于执行需要的副作用操作，第二个参数是可选的，表示 effect 函数的依赖项。

示例

下面是一个使用 useEffect 进行挂载操作的例子：

import { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 挂载时执行的操作
    console.log('Example component is mounted.');
    return () => {
      // 卸载时执行的操作
      console.log('Example component is unmounted.');
    };
  }, []);

  return (
    <div>
      <h1>Hello, React Hook!</h1>
    </div>
  );
}

在这个例子中，我们使用了 useEffect 来打印组件的挂载和卸载信息。[] 表示没有依赖项，这意味着 effect 函数只会在挂载和卸载时被执行一次。

总结

React Hook 让我们在编写组件时更加灵活和方便。使用 useEffect 来执行挂载和卸载操作是很常见的，但也可以用于监听 props 或者 state 的变化，或者调用 HTTP 请求等副作用操作。不过需要注意的是，务必在 effect 函数中返回一个清理函数以防止内存泄漏。

以上就是 React Hook 将挂载的基本介绍，欢迎学习和使用！