React hooks文档笔记（五）useEffect——解决异步操作竞争问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了React hooks文档笔记（五）useEffect——解决异步操作竞争问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.开发环境下组件加载两次？

React hooks文档笔记（五）useEffect——解决异步操作竞争问题
非bug，重新安装组件仅在开发过程中发生，帮助找到需要清理的效果。在生产环境中只会加载一次。

React 将在 Effect 下次运行之前以及卸载期间调用您的清理函数。return () => {};

2. 🌰订阅事件情况，清除订阅：

useEffect(() => {
  function handleScroll(e) {
    console.log(window.scrollX, window.scrollY);
  }
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

在开发中， Effect call addEventListener()，然后立即callremoveEventListener()，然后再次calladdEventListener()。因此一次只有一个活动订阅。这与在生产中调用一次addEventListener()具有相同的用户可见行为。

3. 🌰接口获取，异步操作“竞争”，清除事件：

如果快速切换select选项，会造成fetchBio会同时请求多个，但是可能以意想不到的顺序到达

原代码：

import { useState, useEffect } from 'react';
import { fetchBio } from './api.js';

export default function Page() {
  const [person, setPerson] = useState('Alice');
  const [bio, setBio] = useState(null);
  
  useEffect(() => {
    setBio(null);
    fetchBio(person).then(result => {
        setBio(result);
    });
  }, [person]);

  return (
    <>
      <select value={person} onChange={e => {
        setPerson(e.target.value);
      }}>
        <option value="Alice">Alice</option>
        <option value="Bob">Bob</option>
        <option value="Taylor">Taylor</option>
      </select>
      <hr />
      <p><i>{bio ?? 'Loading...'}</i></p>
    </>
  );
}

select框依次点击顺序：alice->bob->taylor

发现执行出来是错误结果，taylor选项下对应的页面中竟然显示的是“bob”
React hooks文档笔记（五）useEffect——解决异步操作竞争问题

修改代码：

 useEffect(() => {
    let ignore = false;
    setBio(null);
    fetchBio(person).then(result => {
      if (!ignore) {
        setBio(result);
      }
    });
    return () => {
      ignore = true;
    }
  }, [person]);

select框依次点击顺序：alice->bob->taylor，结果显示正确
React hooks文档笔记（五）useEffect——解决异步操作竞争问题

解析

每个渲染器的 Effect 都有自己的ignore变量。最初，ignore变量设置为false。
但是，如果 Effect 被清除（例如当您选择不同的人时），它的ignore变量将变为true。

请求完成的顺序并不重要。

只有最后一个人的 Effect 会ignore设置为false，所以它会调用setBio(result)。过去的影响已被清除，因此if (!ignore)检查将阻止他们调用setBio：文章来源地址https://www.toymoban.com/news/detail-510012.html

选择’Bob’触发器fetchBio('Bob')

选择’Taylor’触发器fetchBio('Taylor') 并清除之前的（Bob 的）效果

抓取’Taylor’完成前抓取’Bob’

'Taylor’渲染调用的效果setBio('This is Taylor’s bio')

抓取’Bob’完成

'Bob’渲染的效果不做任何事情，因为它的ignore标志被设置为true