草庐IT

javascript - 由 Flux Store 控制的 React Form(最佳实践？)

coder 2025-01-06 原文

所以我有一个很大的组件就是我的表单:

<form>
 <FirstComponent value={this.state.firstValue}/>
 <SecondComponent value={this.state.secondValue}/>
 {more components here}
 <input type="submit" ... />
</form>

此表单组件正在监听使用 firstAction、secondAction 等更新其值的商店

注意:组件根据返回 {firstValue: something, secondValue: something, etc} 的 store.getState() 更新其状态

假设我的 FirstComponent 是一个输入:

<input type="text" value={this.props.value} 
   onChange={(e)=>this.props.firstAction(e.target.value)}
</input>

好的，所以 onChange 触发 Prop firstAction 这实际上是将更新我的商店并使表单重新呈现的 Flux Action 。我在这里有两个好处，当用户提交表单时，我可以在我的商店中检查 FirstComponent 的值，我还可以从父组件控制我的所有状态。

但是，每次用户键入一个字符时，此 onChange 回调都会调用一个操作(因此它会产生大量调用，因此会重新呈现)<-- 这会引发严重的性能问题吗？="">

相反，我可以使用 refs，当用户按下提交按钮时，获取 this.refs.myFirstComponent.state... 我也将拥有该值(即 Uncontrolled Component ？)但这听起来不像是来自社区的建议。

所以我的问题是，我上面描述的第一种方法是好方法吗？我该如何优化它？那么应该只影响 FirstComponent 的重新渲染不会使 SecondComponent 等重新渲染？ shouldComponentUpdate是到这里的唯一方法吗？

编辑 1:

使用第一种方法时，我遇到了一个问题...我使用 WebdriverIO 进行了端到端测试，在文本字段中添加了一个值:http://webdriver.io/api/action/setValue.html

我不知道为什么，但如果我试图在输入中添加单词“Testing”，webdriver 只会添加最后一个字母。如果根本不使用状态/存储，这个问题就消失了。但是，如果我的 FirstComponent 内部有状态，则类似于:

<input type="text" value={this.state.value} 
   onChange={(e)=>this.setState({firstValue: e.target.value})}
   onBlur={()=>this.props.callback(this.state.firstValue)}
</input>

在这种情况下，组件似乎在键入时 react 更快(仅呈现自身)，然后，当用户移除焦点时，它会更新商店。我不得不说，我不喜欢这种方法，因为它不遵循提升状态的模式(而且我觉得我正在复制状态)但它似乎工作得更快，更重要:我的 e2e 测试有效。还有更多想法吗？

最佳答案

您的第一种方法(即 onChange 触发更新商店并使您的表单重新呈现的通量操作)似乎是一个不错的方法。我一直这样使用它，我也看到其他人也那样使用它。

关于您的以下评论:

However, this onChange callback will call an action every time the user types one character (so it can produce a lot of calls therefore re-renders) <-- can this provoke serious performance issues?

是的，我相信是这样。我曾经创建了一个组件，其中包含许多其他组件以及一些输入字段。每当我在输入字段中键入一个字符时，整个组件(及其包含的其他组件和输入字段)都会重新呈现，从而导致性能问题。如果我打字快，那会很明显。您实际上可以使用 https://facebook.github.io/react/docs/perf.html 来验证它.

无论如何，正如您提到的，我解决这个问题的方法是实现 shouldComponentUpdate() .

我想提的一个小技巧是创建自定义 <Input />环绕 <input /> 的组件并实现 shouldComponentUpdate() (即 this.props.value !== nextProps.value || this.props.checked !== nextProps.checked )这样，如果您创建一个表单组件，例如，具有许多输入字段(使用自定义 <Input /> )，只有更改的输入字段会被重新呈现。

不过，我也很想看看其他人是如何解决这个问题的。

关于javascript - 由 Flux Store 控制的 React Form(最佳实践？)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31735865/

javascriptStorecodethisvalueformsreactjsreactjs-flux

有关javascript - 由 Flux Store 控制的 React Form(最佳实践？)的更多相关文章

  1. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇，就使用ruby​​onrails自动化单元测试而言，你们正在做什么？您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您？git中的预提交Hook？只是手动调用？我完全理解测试，但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的，并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您？ 最佳答案 不确定您到底想听什么，但是有几个级别的自动代码库控制:在处理某项功能时，您可以使用类似autotest的内容获得关于哪些有效，哪些无效的即时反馈。要确保您的提

  2. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  3. Ruby Readline 在向上箭头上使控制台崩溃 - 2

    当我在Rails控制台中按向上或向左箭头时，出现此错误:irb(main):001:0>/Users/me/.rvm/gems/ruby-2.0.0-p247/gems/rb-readline-0.4.2/lib/rbreadline.rb:4269:in`blockin_rl_dispatch_subseq':invalidbytesequenceinUTF-8(ArgumentError)我使用rvm来管理我的ruby​​安装。我正在使用=>ruby-2.0.0-p247[x86_64]我使用bundle来管理我的gem，并且我有rb-readline(0.4.2)(人们推荐的最少

  4. ruby-on-rails - 带 Spring 锁的 Rails 4 控制台 - 2

    我正在使用Ruby2.1.1和Rails4.1.0.rc1。当执行railsc时，它被锁定了。使用Ctrl-C停止，我得到以下错误日志:~/.rvm/gems/ruby-2.1.1/gems/spring-1.1.2/lib/spring/client/run.rb:47:in`gets':Interruptfrom~/.rvm/gems/ruby-2.1.1/gems/spring-1.1.2/lib/spring/client/run.rb:47:in`verify_server_version'from~/.rvm/gems/ruby-2.1.1/gems/spring-1.1.

  5. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新ruby​​gems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  6. 叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2

    导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵

  7. C51单片机——实现用独立按键控制LED亮灭（调用函数篇） - 2

    说在前面这部分我本来是合为一篇来写的，因为目的是一样的，都是通过独立按键来控制LED闪灭本质上是起到开关的作用，即调用函数和中断函数。但是写一篇太累了，我还是决定分为两篇写，这篇是调用函数篇。在本篇中你主要看到这些东西！！！1.调用函数的方法（主要讲语法和格式）2.独立按键如何控制LED亮灭3.程序中的一些细节（软件消抖等）1.调用函数的方法思路还是比较清晰地，就是通过按下按键来控制LED闪灭，即每按下一次，LED取反一次。重要的是，把按键与LED联系在一起。我打算用K1来作为开关，看了一下开发板原理图，K1连接的是单片机的P31口，当按下K1时，P31是与GND相连的，也就是说，当我按下去时

  8. ruby-on-rails - 在 Rails 控制台中使用 asset_path - 2

    在我的Character模型中，我添加了:字符.rbbefore_savedoself.profile_picture_url=asset_path('icon.png')end但是，对于数据库中已存在的所有角色，它们的profile_picture_url为nil。因此，我想进入控制台并遍历所有这些并进行设置。在我试过的控制台中:Character.find_eachdo|c|c.profile_picture_url=asset_path('icon.png')end但这给出了错误:NoMethodError:undefinedmethod`asset_path'formain:O

  9. ruby-on-rails - Rails 中同一个类的多个关联的最佳实践？ - 2

    我认为我的问题最好用一个例子来描述。假设我有一个名为“Thing”的简单模型，它有一些简单数据类型的属性。像...Thing-foo:string-goo:string-bar:int这并不难。数据库表将包含具有这三个属性的三列，我可以使用@thing.foo或@thing.bar之类的东西访问它们。但我要解决的问题是当“foo”或“goo”不再包含在简单数据类型中时会发生什么？假设foo和goo代表相同类型的对象。也就是说，它们都是“Whazit”的实例，只是数据不同。所以现在事情可能看起来像这样......Thing-bar:int但是现在有一个新的模型叫做“Whazit”，看起来

  10. ruby-on-rails - 向 Rails 3 添加 Ruby 扩展方法的最佳实践？ - 2

    我有一个要在我的Rails3项目中使用的数组扩展方法。它应该住在哪里？我有一个应用程序/类，我最初把它放在(array_extensions.rb)中，在我的config/application.rb中我加载路径:config.autoload_paths+=%W(#{Rails.root}/应用程序/类)。但是，当我转到railsconsole时，未加载扩展。是否有一个预定义的位置可以放置我的Rails3扩展方法？或者，一种预先定义的方式来添加它们？我知道Rails有自己的数组扩展方法。我应该将我的添加到active_support/core_ext/array/conversion

随机推荐