使用不带状态的 React

2024-01-10

我正在构建应用程序的 UI,并且正在探索无需使用状态即可更新 UI。下面的断言粗略地正确吗?

“我们不需要状态,因为它所做的只是当状态中的某些内容发生变化时自动调用组件上的渲染方法。我们可以通过自己调用相关组件的 render 方法来实现相同的实现。

我们仍然会实现 React 的所有相同优势(虚拟 DOM、渲染、绘画优化等)'


It is 技术上更正您不需要使用 React 的内部组件状态来构建 React 应用程序。当然,数据需要存活某处,因此您需要一种机制,可以在数据更改时将所有数据传递到顶级组件(在那里它将渗透到所有其他组件)。

这是 Flux 背后的基本思想(以及许多其他旨在提供 React 外部状态存储的模式)。你有一个或多个stores当数据发生变化时,商店会提供更改事件。然后该数据通过 props 传递到应用程序中。

function render(data) {
  ReactDOM.render(
    <Application data={data} />,
    containerNode
  )
}

myDataStore.on('change', render);

然而,在实践中,由于 JavaScript 的工作方式,很难高效地做到这一点。像上面这样的代码会让 React 每次重新渲染整个组件树myDataStore改变,并且没有好的shouldComponentUpdate钩子,这可能是一个性能问题。使用不可变的值有助于更轻松地实现良好的效果shouldComponentUpdate方法。

在使用 React 外部数据存储的大型 React 应用程序中,您通常会看到以下内容的组合:

  • 一个或多个“容器”组件 https://medium.com/@learnreact/container-components-c0e67432e005负责从商店获取数据并将其传递给他们的孩子。有时将容器放在某个地方是有意义的other比组件树的最顶层(例如,一个应用程序中可能有多个容器)
  • 可重用/“演示”组件不挂接到数据存储中,但提供一些其他好处(例如黑盒样式或交互式小部件)。在这些情况下,将任何非应用程序特定的状态保留在组件本身内部通常是有意义的。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用不带状态的 React 的相关文章

随机推荐

  • 如何为 Rails 设置远程 json API 以进行身份​​验证和会话

    我是 Rails 新手 对 Devise Gem 有相当基本的了解 除了 CRUD 和视图之外 我不清楚它提供了什么可以帮助我让 AngularJs 应用程序与 Rails Json Api 进行对话 目前我正在用手滚动东西 为了安全起见
  • 列表框插入颜色项目

    I use ListBox用于插入文本 例如You add Michael in your database You delete Michael listBox1 Items Insert 0 You add name in your d
  • appcelerator titan:创建一个新文件

    如何在 appcelerator titan 中创建新文件 var Settings Titanium Filesystem getFile Titanium Filesystem tempDirectory Settings Ti API
  • 如何通过HardHat获取底层合约地址的私钥?

    我有 HardHat 教程中的智能合约https hardhat org tutorial writing and compiling contracts html https hardhat org tutorial writing an
  • Google Deployment Manager Cloud Scheduler 类型

    我发现 GCP 没有提供时间表类型 我想知道创建模板 复合类型或类似模板以提供 Cloud Scheduler 类型的步骤 我知道 Google 已经提供了一个例子 https github com GoogleCloudPlatform
  • 无法使用运行 MAMP / PHP 5.6.1 / Mac OS X El Capitan 的 putenv() 修改 PATH

    配置 MAMP专业版 PHP 5 6 1 Mac OS X 埃尔卡皮坦 我需要添加 user local binphp可以访问的系统路径 我尝试过使用 putenv 但似乎我无法使用 putenv 更改 php 中环境变量 PATH 的值
  • 从代理返回异常

    我正在使用大量未记录的 Castle 动态代理系统 我已经设法让它完成我想要的几乎所有事情 除了一件事 如何使代理方法抛出异常而不是返回值 public sealed class MyInterceptor IInterceptor pub
  • JavaScript 中 array.length 可以小于 0 吗?

    由于人们经常使用 array length lt 1 检查数组是否为空而不是 array length 0 我想知道是否存在 array length 可能低于 0 的情况 No the length数组的 是一个非负整数 从the spe
  • 无法将文件分配给文件输入、Firefox 和 IE

    用户可以通过两种可能的方式启动文件传输 拖放到小部件 或使用多文件输入按钮 我喜欢如何使用多文件输入 它将用智能的 选择 8 个文件 或其他内容替换文件名字符串 为此 必须填充输入 我不想从 drop 事件中实际创建 xhr2 对象 而是只
  • 如何将 AWS RDS Aurora MySQL 5.6 升级到 5.7

    我们使用 AWS RDS Aurora MySQL 5 6 作为我们的生产数据库 AWS 于 2018 年 2 月 6 日推出兼容 MySQL 5 7 的 Aurora 引擎 我在 修改实例 中没有看到任何将引擎更改为 MySQL 5 7
  • 使用 jquery 按值选择下拉列表

  • Bash 脚本正则表达式

    我正在尝试匹配格式为 4 6 或 2 8 的字符串中的版本号 我最终将在 bashrc 文件中的函数中使用以下内容来查找操作系统版本 function test string abc ABC12 123 3 4 def echo expr
  • 是否有像 Win32 中的“CreateEvent()”那样的 C++ 跨平台“命名事件”?

    我正在寻找类似于 Win32 世界中的 CreateEvent SetEvent 和 WaitForMultipleObjects 的东西 具体来说 这必须可以在同一台机器上跨进程访问 我们已经在使用 Poco 来做一些跨平台的事情 但我不
  • 从 pandas DataFrame 插入 Access 数据库

    请有人告诉我应该如何插入到数据库中 而不是Python中的所有数据帧 我发现了这个 但不知道如何插入所有名为 test data 的数据框 其中包含两个数字 ID Employee id 我也不知道如何插入 ID 的下一个值 类似于 nex
  • 如何编译C程序?

    好久没做C了 我想编译这个程序 http csrc nist gov groups ST toolkit rng documentation software html 但我不知道如何继续 看起来 makefile 经常引用 GCC 但我从
  • 使用 Python 注入原始 TCP 数据包

    使用 Python 注入原始 TCP 数据包的合适方法是什么 例如 我有由十六进制数字组成的有效负载 并且我想将该十六进制数字序列发送到网络守护程序 这样 如果我选择发送 abcdef 我也会在线路上看到 abcdef 但不是 616263
  • Makefile 循环依赖

    这是我的 Makefile PHONY all homework1 CFLAGS g O0 Wall Werror Wno unused function LDFLAGS lm all homework1 homework1 program
  • 无法在Windows 8.1中的vagrant中安装插件hostmanager

    无法安装插件 显示以下错误 C devbox gt vagrant 插件安装 vagrant hostmanager 插件安装目录 Vagrant 主目录 里面有一个空格 在 Windows 上 Ruby 编译时存在错误 插件到带有空格的目
  • 设置特征通知会导致无效句柄错误

    我想使用 CoreBluetooth 将数据从 iPhone 发送到 Mac 为此 我编写了代码 例如将 iPhone 作为 外围设备 将 Mac 作为 中央设备 工作正常 但有时会直接断开 然后不断地连接和断开 有时 当它尝试重新连接时
  • 使用不带状态的 React

    我正在构建应用程序的 UI 并且正在探索无需使用状态即可更新 UI 下面的断言粗略地正确吗 我们不需要状态 因为它所做的只是当状态中的某些内容发生变化时自动调用组件上的渲染方法 我们可以通过自己调用相关组件的 render 方法来实现相同的