Effect了解

最新推荐文章于 2024-09-02 17:34:07 发布

妍思码匠

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量465

点赞数 6

分类专栏：笔记-react 文章标签：前端 javascript react.js

本文链接：https://blog.csdn.net/wjs0406/article/details/135870841

版权

笔记-react 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了React中的useEffectHook，包括其作用、使用步骤（声明、指定依赖、添加清理函数）、注意事项，以及如何避免常见的使用误区。

摘要由CSDN通过智能技术生成

概念

Effect可以理解为暂时跳出React代码，并与外部系统进行同步的一种机制，例如浏览器API、下载文件、网络、第三方插件等。他在每次渲染后执行。

使用方法

（1）声明。引入useEffect HOOK并编写逻辑（接收一个回调函数做第1个参数）

// 引入HOOK
import { useEffect } from 'react';

function MyComponent() {
  // 在组件顶部调用
  useEffect(() => {
    // 每次渲染后都会执行此处的（跳出React部分的）代码
  });
  return <div />;
}

（2）指定Effect的依赖。接收一个数组做第2个参数，用来指定页面重新渲染后Effect可以不执行的场景。

function MyComponent({isPlaying}) {
  useEffect(() => {
    // ...
  }, [isPlaying]); // 如果isPlaying的值与上次渲染一致，则跳过执行useEffect
  return <div />;
}

（3）按需添加清理函数cleanup。清理函数的作用是清除上一次重新执行的状态（例如订阅一个值后需要取消订阅、设置一个定时器后需要清除定时器、一些值重置为初始值等等）。

在useEffect回调函数中return一个函数，在函数中编写相关的清理逻辑。

清理函数的执行时机是：每次Effect重新执行之前；组件被卸载时。

useEffect(() => {
    const connection = createConnection();
    connection.connect();
    // 返回一个函数，用来执行清理的相关逻辑
    return () => {
      connection.disconnect();
    };
}, [palying]);

注意事项

每次渲染结束会执行useEffect，而每次修改state会触发重新渲染，因此不能在useEffect中修改state，会导致死循环。
useEffect的依赖参数如果是空数组，里面的代码会在组件挂载后执行，并不是在渲染后执行（useEffect(() => { // ... ... }), []）
应尽量避免使用Effect

参考官网useEffect – React 中文文档