Reactjs 函数示例 useEffect - Javascript

简介

React 是一个广泛使用的 JavaScript 库，用于构建用户界面。其中，在 React 中，useEffect 是一种可以让函数组件拥有类组件 componentDidMount，componentDidUpdate 和 componentWillUnmount 生命周期函数的 Hook。

函数组件的生命周期一般比较简单——它们没有实例，实例方法和状态。但使用 useEffect，我们可以在函数组件中执行副作用操作。副作用操作是指：

• 发起网络请求
• 访问浏览器缓存
• 修改 DOM 元素等

因此，useEffect 是一种非常常用的操作，也是编写高质量、可重用 React 组件的关键所在。

使用

useEffect 的使用非常简单，只需要将其引入程序中即可。它的基本语法结构如下：

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 这里执行副作用操作
  });

  return <div>My Component</div>;
}

useEffect 最常用的模式是在组件挂载后执行某些操作，所以我们可以把 useEffect 的第二个参数设置为一个空数组，这样它就只在组件挂载时执行副作用操作：

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 这里执行副作用操作
  }, []);

  return <div>My Component</div>;
}

如果我们将 useEffect 的第二个参数设置为一个数组，并在数组中传入状态或属性，那么 useEffect 就会在这些状态或属性更新后执行：

import React, { useState, useEffect } from 'react';

function MyComponent(props) {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 这里执行副作用操作
  }, [count]);

  return (
    <div>
      My Component: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

总结

在使用 React 开发过程中，useEffect 是一个非常重要的工具。它提供了在函数组件中执行副作用操作的能力，并且可以与状态或属性相关联。使用 useEffect 可以帮助我们更好地组织代码，实现更高效、可重用的组件。