脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React竞态条件Race Condition

React竞态条件Race Condition实例详解

 更新时间：2022年11月08日 10:37:47   作者：冴羽  
这篇文章主要为大家介绍了React竞态条件Race Condition实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

竞态条件

Race Condition，中文译为竞态条件，旨在描述一个系统或者进程的输出，依赖于不受控制事件的出现顺序或者出现时机。

举个简单的例子：

if (x == 5) // The "Check"
{
   y = x * 2; // The "Act"
   // 如果其他的线程在 "if (x == 5)" and "y = x * 2" 执行之间更改了 x 的值
   // y 就可能不等于 10.
}

你可能想，JavaScript 是单线程，怎么可能出现这个问题？

React 与竞态条件

确实如此，但前端有异步渲染，所以竞态条件依然有可能出现，我们举个 React 中常见的例子。

这是一个非常典型的数据获取代码：

class Article extends Component {
  state = {
    article: null
  };
  componentDidMount() {
    this.fetchData(this.props.id);
  }
  async fetchData(id) {
    const article = await API.fetchArticle(id);
    this.setState({ article });
  }
  // ...
}

看起来没什么问题，但这段代码还没有实现数据更新，我们再改一下：

class Article extends Component {
  state = {
    article: null
  };
  componentDidMount() {
    this.fetchData(this.props.id);
  }
  componentDidUpdate(prevProps) {
    if (prevProps.id !== this.props.id) {
      this.fetchData(this.props.id);
    }
  }
  async fetchData(id) {
    const article = await API.fetchArticle(id);
    this.setState({ article });
  }
  // ...
}

当组件传入新的 id 时，我们根据新的 id 请求数据，然后 setState 最新获取的数据。

这时就可能出现竞态条件，比如用户选完立刻点击下一页，我们请求 id 为 1 的数据，紧接着请求 id 为 2 的数据，但因为网络或者接口处理等原因，id为 2 的接口提前返回，便会先展示 id 为 2 的数据，再展示 id 为 1 的数据，这就导致了错误。

我们可以想想遇到这种问题的场景，比如类似于百度的搜索功能，切换 tab 等场景，虽然我们也可以使用诸如 debounce 的方式来缓解，但效果还是会差点，比如使用 debounce，用户在输入搜索词的时候，展示内容会长期处于空白状态，对于用户体验而言，我们可以做的更好。

那么我们该如何解决呢？一种是在切换的时候取消请求，还有一种是借助一个布尔值来判断是否需要更新，比如这样：

function Article({ id }) {
  const [article, setArticle] = useState(null);
  useEffect(() => {
    let didCancel = false;
    async function fetchData() {
      const article = await API.fetchArticle(id);
      // 如果 didCancel 为 true 说明用户已经取消了
      if (!didCancel) {
        setArticle(article);
      }
    }
    fetchData();
    // 执行下一个 effect 之前会执行
    return () => {
      didCancel = true;
    };
  }, [id]);
  // ...
}

当然你也可以用 ahooks 中的 useRequest，它的内部有一个 ref 变量记录最新的 promise，也可以解决 Race Condition 的问题：

function Article({ id }) {
  const { data, loading, error} = useRequest(() => fetchArticle(id), {
  	refreshDeps: [id]
  });
  // ...
}

效果演示

问题复现

为了方便大家自己测试这个问题，我们提供相对完整的代码。以 《Avoiding Race Conditions when Fetching Data with React Hooks》中的例子为例，出现 Race Condition 问题的代码如下：

const fakeFetch = person => {
  return new Promise(res => {
    setTimeout(() => res(`${person}'s data`), Math.random() * 5000);
  });
};
const App = () => {
  const [data, setData] = useState('');
  const [loading, setLoading] = useState(false);
  const [person, setPerson] = useState(null);
  useEffect(() => {
    setLoading(true);
    fakeFetch(person).then(data => {
      	setData(data);
      	setLoading(false);
    });
  }, [person]);
    const handleClick = (name) => () => {
    	setPerson(name)
    }
  return (
    <Fragment>
      <button onClick={handleClick('Nick')}>Nick's Profile</button>
      <button onClick={handleClick('Deb')}>Deb's Profile</button>
      <button onClick={handleClick('Joe')}>Joe's Profile</button>
      {person && (
        <Fragment>
          <h1>{person}</h1>
          <p>{loading ? 'Loading...' : data}</p>
        </Fragment>
      )}
    </Fragment>
  );
};

我们实现了一个 fakeFetch函数，用于模拟接口的返回，具体返回的时间为 Math.random() * 5000)，用于模拟数据的随机返回。

实现效果如下：

从效果图中可以看到，我们按顺序点击了 Nick、Deb、Joe，理想情况下，结果应该显示 Joe's Data，但最终显示的数据为最后返回的 Nick's Data。

布尔值解决

现在，我们尝试用一个 canceled 布尔值解决：

const App = () => {
  const [data, setData] = useState('');
  const [loading, setLoading] = useState(false);
  const [person, setPerson] = useState(null);
  useEffect(() => {
    let canceled = false;
    setLoading(true);
    fakeFetch(person).then(data => {
      if (!canceled) {
        setData(data);
        setLoading(false);
      }
    });
    return () => (canceled = true);
  }, [person]);
  return (
    <Fragment>
      <button onClick={() => setPerson('Nick')}>Nick's Profile</button>
      <button onClick={() => setPerson('Deb')}>Deb's Profile</button>
      <button onClick={() => setPerson('Joe')}>Joe's Profile</button>
      {person && (
      <Fragment>
        <h1>{person}</h1>
        <p>{loading ? 'Loading...' : data}</p>
      </Fragment>
    )}
    </Fragment>
  );
};

实现效果如下：

即便接口没有按照顺序返回，依然不影响最终显示的数据。

useRequest 解决

我们也可以借助 ahooks 的 useRequest 方法，修改后的代码如下：

const App2 = () => {
  const [person, setPerson] = useState('Nick');
  const { data, loading} = useRequest(() => fakeFetch(person), {
    refreshDeps: [person],
  });
  const handleClick = (name) => () => {
    setPerson(name)
  }
  return (
    <Fragment>
      <button onClick={handleClick('Nick')}>Nick's Profile</button>
      <button onClick={handleClick('Deb')}>Deb's Profile</button>
      <button onClick={() => setPerson('Joe')}>Joe's Profile</button>
      {person && (
      <Fragment>
        <h1>{person}</h1>
        <p>{loading ? 'Loading...' : data}</p>
      </Fragment>
    )}
    </Fragment>
  );
};

代码效果如上，就不重复录制了。

考虑到部分同学可能会对 useRequest 的使用感到困惑，我们简单介绍一下 useRequest的使用：

useRequest 的第一个参数是一个异步函数，在组件初次加载时，会自动触发该函数执行。同时自动管理该异步函数的 loading 、 data 、 error 等状态。

useRequest 同样提供了一个 options.refreshDeps 参数，当它的值变化后，会重新触发请求。

const [userId, setUserId] = useState('1');
const { data, run } = useRequest(() => getUserSchool(userId), {
  refreshDeps: [userId],
});

上面的示例代码，useRequest 会在初始化和 userId 变化时，触发函数执行。与下面代码实现功能完全一致：

const [userId, setUserId] = useState('1');
const { data, refresh } = useRequest(() => getUserSchool(userId));
useEffect(() => {
  refresh();
}, [userId]);

Suspense

这篇之所以讲 Race Condition，主要还是为了引入讲解 Suspense，借助 Suspense，我们同样可以解决 Race Condition：

// 实现参考的 React 官方示例：https://codesandbox.io/s/infallible-feather-xjtbu
function wrapPromise(promise) {
  let status = "pending";
  let result;
  let suspender = promise.then(
    r => {
      status = "success";
      result = r;
    },
    e => {
      status = "error";
      result = e;
    }
  );
  return {
    read() {
      if (status === "pending") {
        throw suspender;
      } else if (status === "error") {
        throw result;
      } else if (status === "success") {
        return result;
      }
    }
  };
}
const fakeFetch = person => {
  return new Promise(res => {
    setTimeout(() => res(`${person}'s data`), Math.random() * 5000);
  });
};
function fetchData(userId) {
  return wrapPromise(fakeFetch(userId))
}
const initialResource = fetchData('Nick');
function User({ resource }) {
  const data = resource.read();
  return <p>{ data }</p>
}
const App = () => {
  const [person, setPerson] = useState('Nick');
  const [resource, setResource] = useState(initialResource);
  const handleClick = (name) => () => {
    setPerson(name)
    setResource(fetchData(name));
  }
  return (
    <Fragment>
      <button onClick={handleClick('Nick')}>Nick's Profile</button>
      <button onClick={handleClick('Deb')}>Deb's Profile</button>
	    <button onClick={handleClick('Joe')}>Joe's Profile</button>
      <Fragment>
        <h1>{person}</h1>
        <Suspense fallback={'loading'}>
          <User resource={resource} />
        </Suspense>
      </Fragment>
    </Fragment>
  );
};

以上就是React竞态条件Race Condition实例详解的详细内容，更多关于React竞态条件Race Condition的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • React中的useEffect(副作用)介绍

    React中的useEffect(副作用)介绍

    这篇文章主要介绍了React中的useEffect(副作用),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • React中使用Workbox进行预缓存的实现代码

    React中使用Workbox进行预缓存的实现代码

    Workbox是Google Chrome团队推出的一套 PWA 的解决方案,这套解决方案当中包含了核心库和构建工具,因此我们可以利用Workbox实现Service Worker的快速开发,本文小编给大家介绍了React中使用Workbox进行预缓存的实现,需要的朋友可以参考下
    2023-11-11
  • React实现菜单栏滚动功能

    React实现菜单栏滚动功能

    本文将会基于react实现滚动菜单栏功能,点击菜单,内容区域会自动滚动到对应卡片,内容区域滑动,指定菜单栏会被选中,代码简单易懂,感兴趣的朋友一起看看吧
    2024-03-03
  • react路由跳转传参刷新页面后参数丢失的解决

    react路由跳转传参刷新页面后参数丢失的解决

    这篇文章主要介绍了react路由跳转传参刷新页面后参数丢失的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • react配置代理setupProxy.js无法访问v3.0版本问题

    react配置代理setupProxy.js无法访问v3.0版本问题

    这篇文章主要介绍了react配置代理setupProxy.js无法访问v3.0版本问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • React中的生命周期和子组件

    React中的生命周期和子组件

    这篇文章主要介绍了React中的生命周期和子组件，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下
    2022-08-08
  • React Native 搭建开发环境的方法步骤

    React Native 搭建开发环境的方法步骤

    本篇文章主要介绍了React Native 搭建开发环境的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • react中form.setFieldvalue数据回填时 value和text不对应的问题及解决方法

    react中form.setFieldvalue数据回填时 value和text不对应的问题及解决方法

    这篇文章主要介绍了react中form.setFieldvalue数据回填时 value和text不对应的问题及解决方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-07-07
  • VSCode搭建React Native环境

    VSCode搭建React Native环境

    这篇文章主要介绍了VSCode搭建React Native环境，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • React中关于render()的用法及说明

    React中关于render()的用法及说明

    这篇文章主要介绍了React中关于render()的用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-02-02

最新评论