深入理解 React 的 useSyncExternalStore Hook

大家好,今天我们来聊聊 React 18 引入的一个新 Hook:useSyncExternalStore。这个 Hook 主要用于与外部存储同步状态,特别是在需要确保状态一致性的场景下非常有用。本文将深入探讨这个 Hook 的使用场景、工作原理,并通过代码示例来帮助大家更好地理解。

为什么需要 useSyncExternalStore?

在 React 18 之前,我们通常使用 useEffect 或者 useLayoutEffect 来订阅外部存储的变化。然而,这些方法有时会导致状态不一致的问题,特别是在并发模式下。useSyncExternalStore 旨在解决这些问题,确保状态在任何时候都是一致的。

基本用法

首先,我们来看一下 useSyncExternalStore 的基本用法。这个 Hook 接受三个参数:

  1. subscribe: 一个函数,用于订阅外部存储的变化。
  2. getSnapshot: 一个函数,用于获取当前的存储快照。
  3. getServerSnapshot: 一个函数,用于在服务器端渲染时获取存储快照(可选)。
  1. import React, { useSyncExternalStore } from "react";
  2. // 模拟一个外部存储
  3. const store = {
  4. state: 0,
  5. listeners: new Set(),
  6. subscribe(listener) {
  7. this.listeners.add(listener);
  8. return () => this.listeners.delete(listener);
  9. },
  10. setState(newState) {
  11. this.state = newState;
  12. this.listeners.forEach((listener) => listener());
  13. },
  14. getState() {
  15. return this.state;
  16. },
  17. };
  18. function useStore() {
  19. return useSyncExternalStore(
  20. store.subscribe.bind(store),
  21. store.getState.bind(store)
  22. );
  23. }
  24. function Counter() {
  25. const state = useStore();
  26. return (
  27. <div>
  28. <p>Count: {state}</p>
  29. <button onClick={() => store.setState(state + 1)}>Increment</button>
  30. </div>
  31. );
  32. }
  33. export default Counter;

在这个示例中,我们创建了一个简单的计数器应用。store 是一个模拟的外部存储,包含状态和订阅逻辑。useStore 是一个自定义 Hook,使用 useSyncExternalStore 来订阅存储的变化并获取当前状态。

深入理解

useSyncExternalStore 的核心在于它如何确保状态一致性。它通过同步的方式获取存储快照,避免了异步更新带来的潜在问题。在并发模式下,React 可能会在渲染过程中多次调用 getSnapshot,以确保状态的一致性。

此外,useSyncExternalStore 还支持服务器端渲染。通过传递 getServerSnapshot 参数,我们可以在服务器端获取存储快照,从而避免客户端和服务器端渲染不一致的问题。

实际应用场景

useSyncExternalStore 非常适合用于以下场景:

  1. 全局状态管理:例如 Redux 或者 MobX,可以使用 useSyncExternalStore 来订阅全局状态的变化。
  2. 外部数据源:例如 WebSocket 或者其他实时数据源,可以使用这个 Hook 来确保数据的一致性。
  3. 复杂组件通信:在一些复杂的组件通信场景下,使用 useSyncExternalStore 可以简化状态管理逻辑。

代码示例:与 Redux 集成

接下来,我们来看一个与 Redux 集成的示例。假设我们有一个简单的 Redux store:

  1. import { createStore } from "redux";
  2. import { Provider, useSelector, useDispatch } from "react-redux";
  3. import React, { useSyncExternalStore } from "react";
  4. const initialState = { count: 0 };
  5. function reducer(state = initialState, action) {
  6. switch (action.type) {
  7. case "INCREMENT":
  8. return { count: state.count + 1 };
  9. default:
  10. return state;
  11. }
  12. }
  13. const store = createStore(reducer);
  14. function useReduxStore() {
  15. return useSyncExternalStore(store.subscribe, store.getState, store.getState);
  16. }
  17. function Counter() {
  18. const state = useReduxStore();
  19. const dispatch = useDispatch();
  20. return (
  21. <div>
  22. <p>Count: {state.count}</p>
  23. <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
  24. </div>
  25. );
  26. }
  27. function App() {
  28. return (
  29. <Provider store={store}>
  30. <Counter />
  31. </Provider>
  32. );
  33. }
  34. export default App;

在这个示例中,我们创建了一个 Redux store,并使用 useSyncExternalStore 来订阅 Redux store 的变化。这样,我们可以确保组件在任何时候都能获取到最新的状态。

总结

useSyncExternalStore 是 React 18 中一个非常强大的 Hook,特别适用于需要确保状态一致性的场景。通过本文的介绍和代码示例,希望大家能够更好地理解和应用这个 Hook。如果你在项目中遇到了状态不一致的问题,不妨试试 useSyncExternalStore

百万大学生都在用的 AI 写论文工具,篇篇无重复 : AI 写论文

深入理解 React 的 useSyncExternalStore Hook的更多相关文章

  1. React+DvaJS 之 hook 路由权限控制

    博客 学院 下载 GitChat TinyMind 论坛 APP 问答 商城 VIP 活动 招聘 ITeye 写博客 发Chat 登录注册 原 React+DvaJS 之 hook 路由权限控制 20 ...

  2. 理解 React Hooks 心智模型:必须按顺序、不能在条件语句中调用的规则

    前言 自从 React 推出 hooks 的 API 后,相信大家对新 API 都很喜欢,但是它对你如何使用它会有一些奇怪的限制.比如,React 官网介绍了 Hooks 的这样一个限制: 不要在循环 ...

  3. 深入理解React(二) —— 数据流和事件原理

    版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/158 来源:腾云阁 https://www.qclou ...

  4. 深入理解React、Redux

    深入理解React.ReduReact+Redux非常精炼,良好运用将发挥出极强劲的生产力.但最大的挑战来自于函数式编程(FP)范式.在工程化过程中,架构(顶层)设计将是一个巨大的挑战.要不然做出来的 ...

  5. 理解 React,但不理解 Redux,该如何通俗易懂的理解 Redux?

    作者:Wang Namelos链接:https://www.zhihu.com/question/41312576/answer/90782136来源:知乎著作权归作者所有.商业转载请联系作者获得授权 ...

  6. 理解 React,但不理解 Redux,该如何通俗易懂的理解 Redux?(转)

    作者:Wang Namelos 链接:https://www.zhihu.com/question/41312576/answer/90782136来源:知乎 解答这个问题并不困难:唯一的要求是你熟悉 ...

  7. 关于为什么使用React新特性Hook的一些实践与浅见

    前言 关于Hook的定义官方文档是这么说的: Hook 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 简单来说,就是在 ...

  8. 深入理解 React JS 中的 setState

    此文主要探讨了 React JS 中的 setState 背后的机制,供深入学习 React 研究之用. 在课程 React.js入门基础与案例开发 中,有些同学会发现 React JS 中的 set ...

  9. 深度理解 React Suspense(附源码解析)

    本文介绍与 Suspense 在三种情景下使用方法,并结合源码进行相应解析.欢迎关注个人博客. Code Spliting 在 16.6 版本之前,code-spliting 通常是由第三方库来完成的 ...

  10. 理解React组件的生命周期

    本文作者写作的时间较早,所以里面会出现很多的旧版ES5的时代的方法.不过,虽然如此并不影响读者理解组件的生命周期.反而是作者分为几种不同的触发机制来解释生命周期的各个方法,让读者更加容易理解涉及到的概 ...

随机推荐

  1. AIRIOT物联网平台助力油库自动化升级 实现业务场景全覆盖

      随着我国石油工业的飞速发展,油库规模迅速扩大,油库系统逐渐完善起来.石油行业属于高风险行业,所以石油化工产品在储存.运输和生产各个环节,均有极高的安监.环保.应急的管理要求.通常情况下,油库容量. ...

  2. 生物医学顶刊论文(JBHI-2024):TransFOL:药物相互作用中复杂关系推理的逻辑查询模型

    (2024.5.17)JBHI-TransFOL:药物相互作用中复杂关系推理的逻辑查询模型 论文题目:TransFOL: A Logical Query Model for Complex Relat ...

  3. Vue 3指令与事件处理

    title: Vue 3指令与事件处理 date: 2024/5/25 18:53:37 updated: 2024/5/25 18:53:37 categories: 前端开发 tags: Vue3 ...

  4. centos7下启动Django项目报错(sqlite错误)

    报错内容如下: [root@localhost project]# python3 manage.py runserver Watching for file changes with StatRel ...

  5. 2024盘古石取证比赛(IPA+人工智能)

    前言 题目列表 IPA部分 1. 分析毛雪柳的手机检材,记账 APP 存储记账信息的数据库文件名称是: [ 答案格式:tmp.db ,区分大小写 ][ ★★★★☆ ] 通过icost软件可以定位rae ...

  6. ReplayKit2 有线投屏项目-反向Socket实现

    一.需求 我们在使用RTMP协议进行推流的时候,底层仍然采用的是TCP协议或者QUICK协议,有客户端主动发起请求.但是在有线投屏中,需要PC端向手机发起请求建立连接 二.实现 在客户端主动发起请求之 ...

  7. 如何防止 Elasticsearch 服务 OOM ?

    ES 和传统关系型数据库有很多区别, 比如传统数据中普遍都有一个叫"最大连接数"的设置.目的是使数据库系统工作在可控的负载下,避免出现负载过高,资源耗尽,谁也无法登录的局面. 那 ...

  8. Css var 简述

    Css var 语法 var(custom-property-name, value) - custom-property-name 必须 变量必须以 --开头 后面可以是英文.数字连接符,区分大小写 ...

  9. python写文件,过滤空行,根据某一行打上标记

    import shutil import os ###第一步写文件 ''' with open('test.txt', 'w',encoding='utf-8') as f: f.write(&quo ...

  10. SM4Utils加解密demo

    SM4Utils加解密demo package com.example.core.mydemo.sm4; import cn.org.bjca.utils.SM4Utils; public class ...