草庐IT

javascript - 用新的 React : how to compare current props. children

coder 2024-05-10 原文

你好，

我正在构建组件，它仅充当其他一些生成内容的包装器并使用第三方库。该库适用于 props.children的组件。到目前为止一切顺利，但是这个第三方库在应用时有点滞后，或者在元素上刷新。因为刷新这个库的唯一原因是什么时候 props.children改变了我想知道如何比较this.props.children和 nextProps.children在 shouldComponentUpdate .我在想 PureRenderMixin 应该做这项工作，但对我来说它不起作用。即使我只更改组件也会重新渲染 state.listName如下例所示。

<div>
  List name '{this.state.listName}'
  <br />
  <MyComponent>
    <ul>
      {listOfLi}
    </ul>
  </MyComponent>
</div>

有什么办法，如何管理 props.children 的比较？或任何其他选项如何做这样的事情？ 感谢您的帮助!

最佳答案

正如 Matt S 所指出的，接受的答案是一种脆弱的解决方法，并且取决于 key 的非标准使用。除了他列出的列表示例之外，如果您的 id 保持不变但某些字段在资源中被修改，即使使用类似 key={id} 的东西也会失败代表。

这issue包含关于该主题的良好讨论，并以更稳定的 workaround 结尾.本质上，您可以简化 children 属性，以允许您运行深度比较。您可以使用 React.Children 工具来编写简化方法:

// Flattens all child elements into a single list
const flatten = (children, flat = []) => {
    flat = [ ...flat, ...React.Children.toArray(children) ]

    if (children.props && children.props.children) {
        return flatten(children.props.children, flat)
    }

    return flat
}

// Strips all circular references and internal fields
const simplify = children => {
    const flat = flatten(children)

    return flat.map(
        ({
            key,
            ref,
            type,
            props: {
                children,
                ...props
            }
        }) => ({
            key, ref, type, props
        })
    )
}

然后你可以使用 shouldComponentUpdate 或 React.memo 来防止重新渲染:

const MyComponent = ({ children }) => (
    <div>{ children }</div>
)

export default React.memo(MyComponent, (prev, next) => (
    JSON.stringify(simplify(prev.children)) ===
    JSON.stringify(simplify(next.children))
))

这些实用程序 + JSON.stringify 只是一种方法，在 the comment 中提到过。是相似的，您还可以利用 lodash.isequal 等实用程序进行深度比较。不幸的是，我不知道有任何一两个衬垫可用于此比较，但如果您知道更简单稳定的方法，请发表评论!

关于javascript - 用新的 React : how to compare current props. children，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28784050/

javascriptchildrencodepropscomparereactjs

有关javascript - 用新的 React : how to compare current props. children的更多相关文章

  1. ruby - 使用 Vim Rails，您可以创建一个新的迁移文件并一次性打开它吗？ - 2

    使用带有Rails插件的vim，您可以创建一个迁移文件，然后一次性打开该文件吗？textmate也可以这样吗？ 最佳答案 你可以使用rails.vim然后做类似的事情::Rgeneratemigratonadd_foo_to_bar插件将打开迁移生成的文件，这正是您想要的。我不能代表textmate。 关于ruby-使用VimRails，您可以创建一个新的迁移文件并一次性打开它吗？，我们在StackOverflow上找到一个类似的问题： https://sta

  2. ruby-on-rails - 如何在发布新的 Ruby 或 Rails 版本时收到通知？ - 2

    有人知道在发布新版本的Ruby和Rails时收到电子邮件的方法吗？他们有邮件列表，RubyonRails有一个推特，但我不想听到那些随之而来的喧嚣，我只想知道什么时候发布新版本，尤其是那些有安全修复的版本。 最佳答案 从therailsblog获取提要.http://weblog.rubyonrails.org/feed/atom.xml 关于ruby-on-rails-如何在发布新的Ruby或Rails版本时收到通知？，我们在StackOverflow上找到一个类似的问题：

  3. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  4. ruby - 需要重构为新的 Ruby 1.9 哈希语法 - 2

    这个问题在这里已经有了答案:HashsyntaxinRuby[duplicate](1个回答)关闭5年前。我有一个Recipe，其中包含以下未通过lint测试的代码:service'apache'dosupports:status=>true,:restart=>true,:reload=>trueend失败并出现错误:UsethenewRuby1.9hashsyntax.supports:status=>true,:restart=>true,:reload=>true不确定新语法是什么样的...有人可以帮忙吗？

  5. ruby - 为什么我不能从 ruby​​ 中的选定键创建新的散列？ - 2

    这个问题困扰了我一段时间。这不是一件困难的事情，但我不知道为什么没有简单的方法来做到这一点，我敢打赌有但我没有看到。我只想取一个散列，像这样:cars={:bob=>'Pontiac',:fred=>'Chrysler',:lisa=>'Cadillac',:mary=>'Jaguar'}然后做类似的事情cars[:bob,:lisa]得到{:bob=>'Pontiac',:lisa=>'Cadillac'}我这样做了，效果很好:classHashdefpick(*keys)Hash[select{|k,v|keys.include?(k)}]endendruby-1.8.7-p249

  6. ruby - 如何将新的 rvm 安装与现有的 ruby​​ 版本相关联？ - 2

    我遇到了RVM的问题，所以我卸载并重新安装了它。事实是我实际上尝试过rbenv，但这对我来说没有用，所以我试图让rvm重新启动并运行-而不必安装重复版本的Ruby。我至少安装了1个现有版本的Ruby:ruby--versionruby1.8.7(2011-12-28patchlevel357)[universal-darwin11.0]但是当我执行rvmlist时，我得到一个空白列表:bash-3.2$rvmlistrvmrubies#Defaultrubynotset.Try'rvmaliascreatedefault'.#=>-current#=*-current&&default

  7. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  8. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  9. ruby-on-rails - 在 Rails 中，我从 Guard 那里收到这个错误，说我必须更新到新的 :cmd syntax - 2

    我刚刚更新了我的gem，当我尝试运行Guard时，出现以下错误:Guard::RSpecDEPRECATIONWARNING:The:clioptionisdeprecated.Pleasecustomizethenew:cmdoptiontofityourneed.这是我的Guard文件:guard'rspec',cli:'--drb'dowatch(%r{^spec/.+_spec\.rb$})watch(%r{^lib/(.+)\.rb$}){|m|"spec/lib/#{m[1]}_spec.rb"}watch('spec/spec_helper.rb'){"spec"}#Ra

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐