React之userEffect的使用

一、userEffect是什么

在React组件中,副作用操作是指那些会被影响的其他的组件,而且不能在渲染过程中完成相关操作。其中,常见的副作用就是从API接口中获取数据。而 useEffect 提供了一种在函数组件中处理副作用的方式,使得函数组件也能处理这些复杂的逻辑。

二、怎么使用

useEffect 函数接收两个参数:

  • 第一个参数:是一个回调函数,该回调函数包含了副作用操作的代码。
  • 第二个参数 :是一个可选的依赖项数组,用于控制 useEffect 的执行时机。
  • 回调函数、依赖项
复制代码
  import React, { useEffect } from 'react';

  function Example() {
    useEffect(() => {
      // 副作用操作代码
      console.log('副作用操作执行');

    }, []); // 依赖项数组

    return <div>示例组件</div>;
  }

  export default Example;

三、不同的使用场景

1、.仅在组件挂载时执行一次(依赖项数组为空)
复制代码
import React, { useEffect } from 'react';

function ComponentDidMountExample() {
  useEffect(() => {
    console.log('组件挂载完成');

    // 清理函数,在组件卸载时执行
    return () => {
      console.log('组件卸载');
    };
  }, []);

  return <div>仅在挂载时执行一次的示例</div>;
}

export default ComponentDidMountExample;
2、在组件挂载和更新时都执行(不传递依赖项数组)
复制代码
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log('组件挂载或更新');
  });

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
}

export default EveryRenderExample;
3、仅在特定依赖项变化时执行
复制代码
import React, { useState, useEffect } from 'react';

function DependencyChangeExample() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  useEffect(() => {
    console.log('count 或 name 发生变化');
  }, [count, name]);

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default DependencyChangeExample;

四、使用的好处

代码复用useEffect 可以将副作用逻辑封装在一个函数中,提高代码的复用性。

逻辑分离:将副作用操作与组件的渲染逻辑分离,使代码更加清晰和易于维护。

函数式编程 :使用 useEffect 可以在函数组件中处理副作用,避免了类组件的复杂性,使代码更符合函数式编程的思想。

相关推荐
Kevin在掘金920144 分钟前
c#、.net、Fluent UI Blazor
前端
LovelyAqaurius5 分钟前
RSA加密算法:从数学魔法到现实守护
前端
Hilaku6 分钟前
说实话,React的开发体验,已经被Vue甩开几条街了
前端·javascript·vue.js
蛋黄蛋黄10 分钟前
微信表情怎么在自己的项目使用微信表情?-> [开源仓库]wechat-emoji
前端·github
汪子熙11 分钟前
错误剖析:net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK) 的含义与解决之道
前端
猩猩程序员13 分钟前
Rust 1.88 稳定支持裸函数:更安全简洁的汇编函数写法
前端
艾克马斯奎普特14 分钟前
为什么响应性语法糖最终被废弃了?尤雨溪也曾经试图让你不用写 .value
前端·vue.js·代码规范
qiyue7715 分钟前
AI编程专栏(一)- 评估AI编程工具对编程语言支持情况
前端·ai编程
多啦C梦a17 分钟前
React Hooks 编程:`useState` 和 `useEffect`,再不懂就OUT了!
前端·javascript