《useEffect完全指南》笔记

最新推荐文章于 2024-08-23 08:57:17 发布
最新推荐文章于 2024-08-23 08:57:17 发布
阅读量505 收藏 2
点赞数
分类专栏： 前端 react hook 有道云笔记 文章标签： react useEffect hooks
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daoke_li/article/details/115732245
版权
本文详细探讨了React Hooks中的useEffect，包括它与componentDidMount的区别、函数定位、渲染过程、运行时机、清除逻辑、更新条件、useRef的应用、state管理和数据获取策略。文章通过实例解释了如何正确使用依赖数组以及何时使用useReducer，同时讨论了竞态问题的解决方案，旨在帮助开发者更好地理解和运用useEffect。
摘要由CSDN通过智能技术生成

本篇是个人笔记，并非教程，建议看原文，虽然比较长，但看个两三遍试用一下还是非常有提升的，有问题可以一起交流~

原文地址：https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/
作者简介：https://overreacted.io/zh-hans/my-decade-in-review/

useEffect(fn, [])和componentDidMount的区别

前者会捕获props和state，所以在回调函数中不管等多久后，拿到的props和state依旧是初始值(定时器例子)。如果需要拿到实时数据，则可使用ref或后文提到的其它方式。

函数存放的最佳位置

  1. 和state和props无关，放到组件外
  2. 只和某个useEffect有关，放到这个里面
  3. effect使用到以上两种之外的函数，用useCallback包裹起来。

每次渲染

  1. state和props是每帧完全独立的，对于本次的渲染来说就是个常量，包括对象类型，当然我们不能放弃setState而直接修改对象的属性
    函数也会每帧独立渲染，被调用时传入的参数就是当前帧的数值，不会随着组件更新而变化。
  2. 都有它自己的Effects，即Effects内部保存了当次渲染时的state和props，可以理解为effects是组件渲染的一部分。

effects运行时机

React只会在浏览器绘制后运行effects。

延时的情况

  1. 如果effect中有延时，则执行时输出的state和props仍然是当初调用时的值，不会随着组件更新而改变(原理是闭包)；但在class组件的didUpdate里却随时更新。即如下两种写法等价
function Example(props) {
 useEffect(() => {
   setTimeout(() => {
     console.log(props.counter);
   }, 1000);
 });
 // ...
}
function Example(props) {
 const counter = props.counter;
   useEffect(() => {
       setTimeout(() => {
         console.log(counter);
       }, 1000);
 });
 // ...
}

useRef 在effect中使用实时的state和effect

如下实现相当于模拟了class中的行为：

function Example() {
 const [count, setCount] = useState(0);
 const latestCount = useRef(count);
 useEffect(() => {
      // Set the mutable latest value
      latestCount.current = count; 
      setTimeout(() => {
      // Read the mutable latest value 
          console.log(`You clicked ${latestCount.current} times`); 
     }, 3000);
 });
// ...

effects中的清除

effects的return：每次浏览器渲染完后运行effects，首先调用return中定义的函数进行一些清除工作，而函数里的state或props是上一次的值，即定义时保存的数据。假设每次订阅一个id再清除这个id，如果第一次id为10，第二次id为20，则本以为react的执行顺序是：

  1. 清除id为10的effect
  2. 渲染id为20的UI
  3. 运行id为20的effect

而事实上是

  1. 渲染id为20的UI
  2. 清除id为10的effect
  3. 浏览器绘制。我们在屏幕上看到{id: 20}的UI。
  4. 运行id为20的effect

即先渲染本帧后清除上一帧。

useEffect 更新条件

提供给useEffect一个依赖数组参数(deps)，相当于告诉react这个effect只用到了这些参数，当组件更新时所有参数都没有变化，react就会跳过执行此次effect。如果有一个参数变化，则此次会同步所有参数。
如何写更新条件？

“将诚实地告知effect依赖作为一条硬性规则，并且要列出所以依赖”

  1. 第一种策略是在依赖中包含所有effect中用到的组件内的值。
  2. 第二种策略是修改effect内部的代码以确保它包含的值只会在需要的时候发生变更。

setState的函数形式

当我们想要根据前一个状态更新状态的时候，我们可以使用setState的函数形式

useEffect(() => {
    const id = setInterval(() => {
          setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
}, []);

useReducer

一个原则：只在effect中传递最小的信息，如上。有时上述方法并不能完全解决问题，比如下面的例子中step改变时count会更新步长，定时器被清除后会重启。

function Counter() {
  const [count, setCount] = useState(0);
  const [step, setStep] = useState(1);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + step);
    }, 1000);
    return () => clearInterval(id);
  }, [step]);
  return (
    <>
      <h1>{count}</h1>
      <input value={step} onChange={e => setStep(Number(e.target.value))} />
    </>
  );
}

如果希望不用重启定时器，就需要用到useReducer。

当你想更新一个状态，并且这个状态更新依赖于另一个状态的值时，你可能需要用useReducer去替换它们。当你写类似setSomething(something => …)这种代码的时候，也许就是考虑使用reducer的契机。reducer可以让你把组件内发生了什么(actions)和状态如何响应并更新分开表述。

我们用一个dispatch依赖去替换effect的step依赖：

import React, { useReducer, useEffect } from 'react';
const initState = {
    count: 0,
    step: 1
}
const reducer = (state, action) => {
    const { count, step } = state
    if (action.type === 'tick') {
        return { count: count + step, step }
    } else if (action.type === 'step') {
        return { count, step: action.step }
    }
}
const Reducer01 = () => {
    const [state, dispatch] = useReducer(reducer, initState)
    const {count, step} = state

    useEffect(() => {
        const t = setInterval(() => {
            dispatch({ type: 'tick' })
        }, 1000)
        return ()=>[
            clearInterval(t)
        ]
    }, [dispatch]) // 实际上，这个依赖可以不写，因为dispatch在整个组件的生命周期中是不变的
    
    return (
        <div>
            <h3>使用reducer</h3>
            <p>{count}</p>
            <input onChange={e=>dispatch({type:'step',step:Number(e.target.value)})} />
        </div>
    );
}

export default Reducer01;

来自于props的step

如果上例中的step来自于props，则可以把reducer写到组件内获取step。但这种模式会使一些优化失效，所以应该避免滥用——reducer随着每次组件渲染会生成一份新的。useReducer可以理解为是Hooks的“作弊模式”。它可以把更新逻辑和描述发生了什么分开。好处是，这可以帮助我移除不必需的依赖，避免不必要的effect调用。

const Reducer02 = ({ step }) => {
    const reducer = (state, action) => {
       const { count } = state
        if (action.type === 'tick') {
            return { count: count + step, step }
        } else if (action.type === 'step') {
            return { count, step: action.step }
        }
    }
    
    const [state, dispatch] = useReducer(reducer, initState)
    const { count } = state
    
    useEffect(() => {
        const t = setInterval(() => {
            dispatch({ type: 'tick' })
        }, 1000)
        return () => [
            clearInterval(t)
        ]
    }, [])
    return (……);
}

获取数据

根据查询参数自动获取结果

关于获取数据的一个例子：查询参数query改变时，useEffect自动执行拉取数据的操作。

function SearchResults() {
  const [query, setQuery] = useState('react');

  useEffect(() => {
    function getFetchUrl() {
      return 'https://hn.algolia.com/api/v1/search?query=' + query;    
    }

    async function fetchData() {
      const result = await axios(getFetchUrl());
      setData(result.data);
    }

    fetchData();
  }, [query]); // ✅ Deps are OK
  // ...
}

复用获取查询地址的方法

当上述例子中需要复用getFetchUrl逻辑时，将其写在useEffect外面的组件内，同时将函数作为依赖，这样会造成每次刷新都会请求数据。

function SearchResults() {
  // 🔴 Re-triggers all effects on every render  
  function getFetchUrl(query) { 
     return 'https://hn.algolia.com/api/v1/search?query=' + query; 
  }
  useEffect(() => {
    const url = getFetchUrl('react');
    // ... Fetch data and do something ...
  }, [getFetchUrl]); // 🚧 Deps are correct but they change too often

  useEffect(() => {
    const url = getFetchUrl('redux');
    // ... Fetch data and do something ...
  }, [getFetchUrl]); // 🚧 Deps are correct but they change too often

  // ...
}

解决方案论述如下：

  1. 将函数写在组件外部，前提是这个函数没有使用组件内的值
function getFetchUrl(query) {
  return 'https://hn.algolia.com/api/v1/search?query=' + query;
}
function SearchResults() {
  useEffect(() => {
    const url = getFetchUrl('react');
    // ... Fetch data and do something ...
  }, []); // ✅ Deps are OK

  useEffect(() => {
    const url = getFetchUrl('redux');
    // ... Fetch data and do something ...
  }, []); // ✅ Deps are OK
  // ...
}
  1. 使用useCallback以及将函数作为依赖。
function SearchResults() {
  // ✅ Preserves identity when its own deps are the same  
  const getFetchUrl = useCallback((query) => {
      return 'https://hn.algolia.com/api/v1/search?query=' + query;  
  }, []);  // ✅ Callback deps are OK
  useEffect(() => {
    const url = getFetchUrl('react');
    // ... Fetch data and do something ...
  }, [getFetchUrl]); // ✅ Effect deps are OK

  useEffect(() => {
    const url = getFetchUrl('redux');
    // ... Fetch data and do something ...
  }, [getFetchUrl]); // ✅ Effect deps are OK

  // ...
}
  1. 如果query是个其他地方可以改变的组件内state，则可以设置为依赖
function SearchResults() {
  const [query, setQuery] = useState('react');

  // ✅ Preserves identity until query changes
  const getFetchUrl = useCallback(() => {
     return 'https://hn.algolia.com/api/v1/search?query=' + query;  
  }, [query]);  // ✅ Callback deps are OK
  useEffect(() => {
    const url = getFetchUrl();
    // ... Fetch data and do something ...
  }, [getFetchUrl]); // ✅ Effect deps are OK

  // ...
}
  1. 如果函数是从父组件传入，比如子组件发现父组件的query改变后就去请求数据，仍然适用于上面的方法
function Parent() {
  const [query, setQuery] = useState('react');

  // ✅ Preserves identity until query changes
  const fetchData = useCallback(() => {
      const url = 'https://hn.algolia.com/api/v1/search?query=' + query;    // ... Fetch data and return it ...
  }, [query]);  // ✅ Callback deps are OK
  
  return <Child fetchData={fetchData} />
}

function Child({ fetchData }) {
  let [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(setData);
  }, [fetchData]); // ✅ Effect deps are OK

  // ...
}

需要注意的是这种情况不能放入class组件中使用，因为函数在整个生命周期中只有一份，地址永远不变，无法驱动query变动后的刷新。解法是封装一个子组件去请求数据，然后把query传给子组件，在子组件中判断query来决定是否要更新。此时query就相当于只为了让子组件做diff才传入的，而在hooks中，effect是参与数据流的，就能更好的解决这个问题。

  1. 类似的，使用useMemo可以对复杂对象做更多的事情，下面例子中使用useMemo封装了一个dom需要的stlye格式，只要color改变，dom就跟随渲染了。
function ColorPicker() {
  // Doesn't break Child's shallow equality prop check
  // unless the color actually changes.
  const [color, setColor] = useState('pink');
  const style = useMemo(() => ({ color }), [color]);
  return <Child style={style} />;
}
  1. 需要注意点是，作者说 “到处使用useCallback是件挺笨拙的事。在上面的例子中，我更倾向于把fetchData放在我的effect里（它可以抽离成一个自定义Hook）或者是从顶层引入。我想让effects保持简单，而在里面调用回调会让事情变得复杂” 。

竞态问题

定义：“请求结果返回的顺序不能保证一致。比如我先请求 {id: 10}时的数据，然后更新到{id: 20}，但{id: 20}的请求更先返回。请求更早但返回更晚的情况会错误地覆盖状态值。” 解决的方法是使用一个布尔值跟踪状态。

function Article({ id }) {
  const [article, setArticle] = useState(null);

  useEffect(() => {
    let didCancel = false;
    async function fetchData() {
      // 当这一步等待时间长未返回数据时下一次请求发生了，
      // 则在effect清除工作中会置didCancel为true，
      // 即使这次结果返回了也会被丢弃，不再影响到当前的数据
      const article = await API.fetchArticle(id);
      if (!didCancel) {
          setArticle(article);
      }
    }

    fetchData();

    return () => {
          didCancel = true;
    };
  }, [id]);

  // ...
}

结束

本文讲述的effect基本都是初级使用水平，而社区将会推出一些基于effect的hooks，以减少我们的频繁手动创建effect。

daoke_li
关注
专栏目录
开发工具链:流行框架库和工具的选型指南
AI天才研究院
05-02 131
开发工具链:流行框架、库和工具的选型指南 1.背景介绍 在当今快节奏的软件开发世界中,选择合适的工具链对于提高开发效率、确保代码质量和加快上市时间至关重要。工具链包括各种框架、库和工具,它们可以简化开发过程、提高可维护性并促进最佳实践的采用。然而,由于可用选项的数量庞大且不断增长,选择
wujie微前端接入笔记
weixin_39818813的博客
04-19 1223
微前端是一种软件架构模式，旨在将前端应用程序拆分为更小、更独立的部分，这些部分可以独立开发、部署和维护。每个微前端部分代表着一个小型的前端应用，可以由不同的团队独立开发，并且可以独立部署到生产环境中。这种模式使得团队可以更灵活地构建和扩展前端应用，同时降低了应用的复杂性和维护成本。通过微前端，不同团队可以在不同的技术栈下开发各自的前端功能，并将它们组合成一个完整的前端应用。
useEffect使用方法
我的博客
10-17 1896
useEffect使用方法 useEffect 替代了原来的类组件生命周期，有三种使用方式，我们可以针对不同的业务使用useEffect； import React, {useEffect, useState} from "react"; import reactDom from "react-dom"; function Effect (){ const [count, setCount] = useState(0) // 1. 第一种使用方法：componentDidMount, c
useEffect
weixin_44800076的博客
10-05 539
useEffect的正确使用姿势
react 中的useState useEffect
最新发布
huhudeni的博客
08-23 933
下面的这些hook使我们常用的一些useStateuseCallback、useMemo、useRef 和 useContex下面我将讲解什么时候使用是最好的首先我们需要明确的一点是，这些hook都是在做缓存。
useEffect的使用
it佳佳的博客
05-25 385
Form窗体 const { onSubmit: handleUpdate, onCancel: handleUpdateModalVisible, createModalVisible, values, dispatch } = props; const [menuData, setMenuData] = useState([]); useEffect(() => { dispatch({ #注意这里必须有相应的model
useEffect使用指南
热门推荐
大灰狼的小绵羊哥哥的博客
07-02 6万+
最近在写一些React的应用，用上了最新的Hooks。Hooks好用，但是对于刚上手Hooks的小伙伴来说，坑也挺多的。所以决定总结一下Hooks的使用经验，从useEffect开始。useEffect用于处理组件中的effect，通常用于请求数据，事件处理，订阅等相关操作。这里以数据请求为例，来深入介绍useEffect的用法。 最基本的使用 首先，举一个简单的例子： import Re...
小D课堂React V16.12.0课程详细笔记与安装指南
课程还介绍了React Router用于路由管理，以及如何使用React Hooks（如useState和useEffect）替代传统的生命周期方法。此外，它还涉及到了Webpack和Babel在构建React项目中的角色，这两个工具常用于优化代码打包和...
React学习笔记之十四: React hooks初探
qq_24724109的博客
09-09 419
React Hooks 本文参考主要博文: 阮一峰老师的 React-hooks 教程 How to fetch data with React Hooks? useEffect 完整指南 React-hooks 的官方文档 demo React hooks 的主要功能是让函数式组件能够模拟出自身的状态 state 和生命钩子函数 常用的 React Hooks 函数包括 useState us...
umi，安卓开发指南
flunsna的博客
12-15 1291
网络请求接口（service.ts中） import request from ‘@/utils/request’; import type { ListParamsType } from ‘@/services/data’ import type { AccountInfoType } from ‘./data’ /** 列表数据 @param params @returns */ export async function getUserList(params: ListParams.
useEffect详解
IT_bar的博客
05-17 5万+
useEffect使用时有以下4种情况 1、不传递 useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，这就是问题所在。 //1 useEffect(()=>{ console.log(props.number) setNumber(props.number) }) //所有更新都执行 2、传递空数组 //2 useEffect(()=>{ console.log(
React中的useEffect(副作用)
weixin_47075145的博客
11-16 4279
useEffect是用来使函数组件也可以进行副作用操作的。那么什么是副作用呢？函数的副作用就是函数除了返回值外对外界环境造成的其它影响。举个例子，假如我们每次执行一个函数，该函数都会操作全局的一个变量，那么对全局变量的操作就是这个函数的副作用。而在React的世界里，我们的副作用大体可以分为两类，一类是调用浏览器的API，例如使用addEventListener来添加事件监听函数等，另外一类是发起获取服务器数据的请求，例如当用户组件挂载的时候去异步获取用户的信息等。
useEffect的基本使用
guoth的博客
03-17 941
函数式组件useEffect为模拟class组件的生命周期钩子副操作； 侧重effect和return销毁函数的执行时机
你不知道的useEffect
楠姐的博客
05-25 760
你不知道的useEffect
useEffect使用详解
一步一个脚印，踏实努力，向着目标前进
08-24 8336
useEffect是React中的一个钩子函数，用于处理副作用操作。副作用是指在组件渲染过程中，可能会对外部环境产生影响的操作，比如数据获取、订阅事件、操作DOM等。useEffect接受两个参数：一个是副作用函数，另一个是依赖数组。副作用函数会在组件渲染时执行，并且在每次组件更新后也会执行。如果依赖数组不为空，并且依赖数组中的值发生变化时，副作用函数也会被重新执行。如果依赖数组为空，则副作用函数只会在组件渲染时执行一次。以下是useEffect。
useEffect的用法详细
m0_56860427的博客
10-09 1万+
1.用处 在react中，可以在生命周期中执行副作用操作，在react hooks中，可以在useEffect中执行副作用操作。 2.执行时机 可以看做 react 中componentDidMount，componentDidUpdate和componentWillUnmount这三个生命周期函数的组合， 也就是在这三个时候会执行。 3.参数 useEffect()有两个参数，第一个参数是要执行的函数，第二个参数是一个依赖项数组数组(根据需求第二个参数可选是否填写)， 根据数组里的...
React的useEffect
a3337779的博客
04-28 683
概念：自定义Hook是以use打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用// 封装自定义Hook// 问题: 布尔切换的逻辑 当前组件耦合在一起的 不方便复用// 解决思路: 自定义hook// 可复用的逻辑代码value)// 哪些状态和回调函数需要在其他组件中使用 returnreturn {value,toggle// 封装自定义hook通用思路// 1. 声明一个以use打头的函数// 2. 在函数体内封装可复用的逻辑（只要是可复用的逻辑）
useEffect 的使用技巧
2402_85402030的博客
06-07 775
每次点击发现只会输出，也就是当 useEffect 依赖为对象时，每次更新都会执行。
Shell学习指南：基础笔记与分享
本学习笔记旨在提供一个基础的Shell学习指南，帮助读者深入了解和掌握Shell编程。Shell是一种命令行解释器，它在操作系统中扮演着至关重要的角色，用于管理和控制计算机系统。这里包含的内容涵盖了Shell的基本概念、...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值