程序员经验分享-hwhale

React 组件交互和全局状态变化

2024-01-02

我对 React 很陌生，只是尝试一下。我想知道有哪些常见模式或用于处理组件之间通信的内置库。例如，我有一个输入组件和一个“列表”组件，该组件根据输入控制器中的内容从服务器进行更新。想想一个自动完成框。既然组件有表示逻辑，那么如果两者不能“相辅相成”怎么办？它们位于页面的不同部分，因此有两个不同的控制器。

另外，如果我有一个通过 Ajax 工作的登录/注销按钮怎么办？我想象页面上的许多不同组件会对登录/注销操作做出反应，根据全局“已登录”状态以及从已登录的特定用户的服务器检索的数据重新配置自身。

React 对这些变化做出“反应”的最佳方式是什么？谢谢


你应该结帐Flux https://www.youtube.com/watch?v=nYkdrAPrdcw and 调度员 http://facebook.github.io/flux/docs/dispatcher.html。 它有点像发布/订阅系统，但没有发布/订阅系统的问题。优点是所有事件都朝一个方向流动，这使得架构更加简单且可扩展。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

State

ReactJS

React 组件交互和全局状态变化 的相关文章

  • 如何从 javascript 错误对象读取错误消息

    有人可以帮我解决以下问题吗 我正在通过 redux 操作进行后调用 如下所示 export const addEmployee firstName surname contactNumber email gt async dispatch

  • Javascript：使用 IIFE 和块语句之间的区别

    IIFE主要用于封装作用域 function let myVar 10 not global 但为什么不直接使用块语句呢 let myVar 10 also not global 除了范围封装之外 进一步使用 IIFE 是否还有其他好处 块

  • 多次训练brain.js？

    在第一次训练后 如何将新信息 仅新信息 而不是所有信息 因为这会花费太多性能 训练到我的用 Brain js 制作的神经网络 它有点粗糙 但您可以使用以下结构来实现 如果我们加入 2 个训练数据集 旧数据集与新数据集 然后重新训练keepN

  • 如何使传单圆圈标记可拖动？

    使用传单 我创建了一个L circleMarker我希望它是可拖动的 var marker L circleMarker new L LatLng 48 94603 2 25912 draggable true bindPopup Circ

  • “React”在定义之前就被使用了

    我正在使用 create react app typescript eslint 应用程序 在构建过程中出现这样的错误 Line 1 8 React was used before it was defined typescript esl

  • Twitter Bootstrap - 下拉菜单 - 箭头键不适用于 Firefox 中的输入标签

    要求 我想在带有用户名和密码字段的下拉菜单中放置一个登录表单 我可以做到这一点 除了以下问题之外 一切正常 Issue 打字时我无法使用箭头键 上 下 firefox 当输入位于下拉代码之外时 这很有效 这适用于其他浏览器 例如 googl

  • jslint 配置 |传递全局变量

    我如何提醒 jshint 我有全局变量 即命名它们 我知道你可以做到这一点 但我不记得语法了 我在这里定义了一个全局的 function window glob1 local var 稍后像这样使用 不同的 IIFE function gl

  • 如何将本地文本文件上传到文本区域（网页内）

    我是一名新手程序员 需要一些帮助来弄清楚如何将本地文本文件上传到我正在构建的网站内的文本区域 我非常精通 HTML CSS 对 Javascript JQuery 有相当的了解 而且我刚刚学习 PHP 您能提供的任何帮助我将不胜感激 我有一

  • 我应该如何实现将状态保存到 localStorage？

    CODE var React require react var Recipe require Recipe jsx var AddRecipe require AddRecipe jsx var EditRecipe require Ed

  • JQuery $.ajax() 在 java servlet 中发布数据

    我想将数据发送到 java servlet 进行处理 数据将具有可变长度并采用键 值对 A1984 1 A9873 5 A1674 2 A8724 1 A3574 3 A1165 5 数据不需要这样格式化 这就是我现在的方式 var sav

  • Javascript location.href 到 mailto 触发 GET HTTP，该 HTTP 在 Chrome 中被取消

    我有一个按钮可以触发以下 javascript 函数 function sendEmail var mail mailto email protected cdn cgi l email protection location href m

  • ES6 静态方法引用 self？ [复制]

    这个问题在这里已经有答案了 我有两节课 存储库和用户存储库 我想在 Repository 中定义一个静态方法 该方法在运行时调用 UserRepository 中的静态函数 有什么干净的方法可以做到这一点吗 class Repository

  • 从 Flask 运行 NPM 构建

    我有一个 React 前端 我想在与我的 python 后端 API 相同的源上提供服务 我正在尝试使用 Flask 来实现此目的 但我遇到了 Flask 找不到我的静态文件的问题 我的前端构建是用生成的npm run build in s

  • 如何使用 NextJS 使用自托管字体face？

    使用 NextJS 的字体 我已经阅读了有关如何在 NextJS 中使用自托管字体的不同主题 我得到了什么 wait compiling 当我这样做时 font face font family montserrat src url myp

  • 使用 nockjs 和 jest 进行 Promise/异步单元测试的代码覆盖率问题

    我使用 NockJS 和 Jest 为 React 应用程序编写了一个简单的 API 调用单元测试 如下所示 AjaxService js export const AjaxService post url data headers gt

  • 如何在 Javascript 中连接 C# ActiveX 事件处理程序

    我尝试使用几个代码片段将 ActiveX 对象与 Javascript 事件处理程序挂钩 我无法确定为什么事件处理程序没有被调用 带有项目的 Github 存储库 https github com JesseKPhillips Csharp

  • 从请求url获取hash参数

    我有这样的网址 http www coolsite com daily plan id 1 http www coolsite com daily plan id 1解析该字符串并读取哈希值 id 之后的值 的最简单方法是什么 谢谢 在客户

  • 如何将项目插入到特定索引处的空数组中？

    我想将一个项目插入到空数组的指定索引中 我看到有 Array prototype splice 方法 但是 如果我在空数组上使用 splice 它只会添加项目来结束数组 如下所示 var a a splice 3 0 item 3 cons

  • Array.of 与“[ ]”。何时使用 Array.of 而不是“[ ]”？

    当我发现时我正在读一些书Array of https developer mozilla org en docs Web JavaScript Reference Global Objects Array of 根据 MDN Array o

  • VS Code 扩展 - 获取完整路径

    我正在为 VS Code 编写一个插件 我需要知道调用扩展的文件的路径 无论是从编辑器上下文菜单或资源管理器上下文菜单调用还是用户只需键入扩展命令 function activate context get full path of the

随机推荐

  • Java：如何在重写方法（祖父母方法）中调用 super().super() [重复]

    这个问题在这里已经有答案了 可能的重复 为什么是 super super method Java中不允许 https stackoverflow com questions 586363 why is super super method

  • medoo 中的 LIKE 运算符

    我该如何使用LIKE使用 medoo 框架的 sql 语句中的运算符 原始SQL语句 SELECT id name FROM table WHERE name LIKE foo 梅多声明 data db gt select table id

  • 构建sphinx文档时导入模块失败

    我在用着Sphinx版本1 4 5 我的项目结构如下 src gt main py docs generated with sphinx quickstart 即使在添加路径后src文件夹中docs conf py sys path ins

  • 检测用户何时点击 UIDatePicker 中的选择指示器？

    如何检测用户何时点击 UIDatePicker 中的选择指示器 如果没有这个 用户必须滚动到某个其他日期 然后再次返回以选择当日期选择器向上滑动时在选择指示器下显示的日期 多谢 Stine 更新 这是我自己能想到的唯一解决方案 UIDate

  • 用PHPWord将word文档解析为字符串

    我已经尝试了几种解决方案来将 Word 文档解析为 PHP 中的字符串 但是有时它们在处理某些 Word 文档时会遇到问题 所以我现在正在尝试 PHPWord 尝试将单词文档解析为字符串 我正在 PHPWord 中查看这个示例文件 它读取一

  • python中函数的均方根

    我想计算Python中函数的均方根 我的函数采用简单的形式 例如 y f x x 和 y 是数组 I tried Numpy 和 Scipy 文档 https docs scipy org doc 但什么也没找到 我假设您想要计算以下伪代码

  • 如何将字体真棒图标添加到输入类型文本中[重复]

    这个问题在这里已经有答案了 我尝试将字体很棒的图标转换为文本输入类型 但可以得到想法 但它不起作用 它将如下图所示 search location padding 9px 10px 8px 10px background fff color

  • 如何抑制 Swift 中的特定警告

    我有一个 Swift 函数 执行如下操作 func f gt Int switch WORDSIZE case 32 return 1 case 64 return 2 default return 0 Because WORDSIZE是一

  • System.Convert.ToSingle() 问题，(1.5) 与 (1,5)

    我正在用 C 编写程序来在模型格式之间进行转换 模型格式将数字作为文本 例如 0 136222 我可以使用 System Convert ToSingle 将其转换为浮点数 但在德国 我们使用逗号作为小数点 0 136222 System

  • 使用 PHPUnit 达到 100% 代码覆盖率

    我一直在为一个项目创建测试套件 虽然我意识到获得 100 的覆盖率并不the指标应该努力达到 代码覆盖率报告中有一个奇怪的地方 我想对此进行一些澄清 看截图 因为被测试方法的最后一行是return 最后一行 只是一个右括号 显示为从未执行

  • 如何从Java调用C++？

    我想从 Java 调用 C 方法 我读过有关 JNI 的内容 但我不知道如何获取所有库文件以及应该将其保存在哪里以便从命令行运行程序 有没有办法从 Eclipse 本身调用 C 方法 因为我用它来运行 Java 类 虽然我过去使用过 JNI

  • CSS div 圆角

    我正在尝试执行以下操作 这是我现在所得到的 但它没有正确渲染 有谁知道我该如何解决这个问题 CSS Curved Corners bl background url bl gif 0 100 no repeat background col

  • 在 ImageView 中翻转和更改图像

    我正在开发一个工作简单且工作效率很高的应用程序 但我有一个地方看起来不太好 那就是翻转动画 我想要的是 我有一个 Button 和按钮下方的 ImageView 单击按钮时 我想制作一个动画 看起来 ImageView 已翻转 并且下一个图

  • ruby 中的适配器模式：访问实例变量

    我正在学习适配器模式 https www sitepoint com using and testing the adapter design pattern 在红宝石中的实现 我想访问适配器模块定义中的实例变量 看一下下面的代码 modu

  • Folium 根据值将标记放入标记簇和图层中

    因此 我正在处理商店数据集 每个商店都有其纬度 经度 名称和类别 由于我们谈论的是数百甚至数千家商店 因此我正在使用标记集群 并且它们工作正常 现在 我还需要根据它们的类别将这些商店设置在不同的图层中 这样当我单击 电子商店 时 我只会在地

  • KornShell Printf - 填充字符串

    我正在尝试编写一个 KornShell ksh 函数 该函数使用 printf 将字符串填充到特定宽度 例子 Call padSpaces Hello 10 Output Hello 我目前有 padSpaces WIDTH 2 FORMA

  • Android - 导入 ViewPager2 库时程序类型已存在 com.transition.R

    Gradle正在抛出程序类型已存在 androidx transition R 导入后androidx viewpager2 viewpager2 1 0 0 beta02 implementation androidx viewpager

  • 如何在 PWA 中更改 Android 导航栏颜色？

    当我在 Android 主屏幕 渐进式 Web 应用程序 上添加页面时 我想更改 Web 上 Android 导航栏的颜色 但是当我打开 PWA 时 Android 导航栏的颜色为黑色 我想要更改颜色为白色 在清单中 您可以更改主题的颜色

  • 无法使用 MPMusicPlayerMediaItemQueueDescriptor 设置 MPMusicPlayerController 队列

    此代码导致沉默 let query MPMediaQuery songs let result query items guard let items result items count gt 0 else return let song

  • React 组件交互和全局状态变化

    我对 React 很陌生 只是尝试一下 我想知道有哪些常见模式或用于处理组件之间通信的内置库 例如 我有一个输入组件和一个 列表 组件 该组件根据输入控制器中的内容从服务器进行更新 想想一个自动完成框 既然组件有表示逻辑 那么如果两者不能

热门标签