【第3521期】如何在 React 中构建一个库

主要观点总结

本文介绍了如何使用React构建库的过程，包括createSelectContext函数的创建，useContextSelector和useContextSetState钩子的使用，以及如何使用useSyncExternalStore来同步外部数据。

关键观点总结

关键观点1: React库架构设计

文章介绍了一个快速使用示例，包括创建一个Context、设置Provider，以及在组件中使用selector获取context中的值和使用setState来更新state。

关键观点2: 使用tsup构建库

作者使用tsup来构建这个库，这是一个零配置的打包工具，可以自动排除package.json中的dependencies和peerDependencies。

关键观点3: useSyncExternalStore钩子介绍

文章详细解释了useSyncExternalStore的工作原理，这是一个用于订阅外部数据源的钩子，可以实现React对非内部状态的监听。

关键观点4: 架构概览

文章通过代码来展示了createSelectContext、useContextSelector和useContextSetState的工作原理解析，并深入解析了useContextSelector的实现细节。

关键观点5: 发布到npm的流程

作者介绍了使用pnpm发布库的简单流程，包括登录npm、初始化package.json、设置必要的字段、构建项目、发布。

文章预览

前言 介绍了如何使用 React 构建库的过程，包括  createSelectContext  函数的创建、 useContextSelector  和  useContextSetState  钩子的使用，以及如何使用  useSyncExternalStore  来同步外部数据。今日前端早读课文章由 @Tiger Abrodi 分享，@飘飘编译。 译文从这开始～～ 引言 我写了一个为 React 的 Context 添加选择器的库：React Context Selector。 React Context Selector：https://github.com/tigerabrodi/react-context-selector 这个库是我在博客中深入探讨 Context 问题之后的延伸。我在博客中得出的结论是：Context 本身没有问题，只是缺少了 “选择器” 功能。 这篇文章将快速介绍一下如何在 React 中构建一个库。 【第3498期】常见的 React 库架构设计 我的库简介 这是一个快速使用示例： // 1. 创建一个 Context const  [ CounterContext ,  Provider ]  =  createSelectContext ( {     count : 0 ,     name : "Tiger" , } ) ; ………………………………