草庐IT

javascript - React : Best way to update self, 但阻止 child 更新？

coder 2024-07-26 原文

我正在研究拖放实现(从头开始，不使用 DND 库)，并希望在拖动过程中限制不必要更新的数量。

拖动“克隆”(通常是原始元素的副本，但可以是任意占位符)是通过更新容器组件(“Clonetainer”)上的状态并使用它来应用转换来实现的。但是，在移动过程中更新整个子树是没有意义的，因为唯一的变化是容器的坐标。

这是我的解决方案:

const ClonetainerRenderShield = React.createClass({
    shouldComponentUpdate: function (newProps) {
        return newProps.shouldUpdate;
    },
    render: function () {
        return this.props.children; // Simple pass-through
    }
});

const Clonetainer = React.createClass({
    componentWillReceiveProps: function (newProps) {
        // OR in any further properties that may indicate a move, versus a child update
        this.isMoveEvent = this.props.offset !== newProps.offset;
    },
    render: function () {
        const style = { transform: `translate(${this.props.offset.left}px,${this.props.offset.top}px)` };
        return <div className="clonetainer-div" style={style}>
            <ClonetainerRenderShield shouldUpdate={ !this.isMoveEvent }>
                { this.props.children }
            </ClonetainerRenderShield>
        </div>;
    }
});

(我不会详细介绍 DND 系统的其余部分，只是说来自上游组件的鼠标事件将偏移参数提供给 Clonetainer。)

我提出的停止更新的解决方案涉及确定 Clonetainer 是否由于移动或其他原因而被触发更新(并相应地设置 this.isMoveEvent)，然后填充一个组件在 Clonetainer 和 child 之间，仅包含基于传入 Prop (shouldUpdate) 的 shouldComponentUpdate。

这行得通。我对它进行了测试，表明它在应该更新的时候更新，不应该更新的时候不更新，但感觉有点矫枉过正，在那里有一个单独的垫片组件只是为了阻止更新向下流动。有没有一种方法可以在不要求子组件包含其自己的 shouldComponentUpdate 逻辑的情况下指示子组件不应从其在 render 中的先前状态更新？

最佳答案

您应该能够在 Clonetainer 组件中将 componentWillReceiveProps 更改为 shouldComponentUpdate 并去掉中间人。 shouldComponentUpdate 有两个参数，(object nextProps, object nextState)，你可以用它来再次比较 this.state 和 this.props 。返回 true 将导致重新渲染。

const Clonetainer = React.createClass({
    shouldComponentUpdate: function (nextProps, nextState) {
        // OR in any further properties that may indicate a move, versus a child update
        this.props.offset !== nextProps.offset;
    },
    render: function () {
        const style = { transform: `translate(${this.props.offset.left}px,${this.props.offset.top}px)` };
        return <div className="clonetainer-div" style={style}>
            { this.props.children }
        </div>;
    }
});

关于javascript - React : Best way to update self, 但阻止 child 更新？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36602833/

javascriptupdatecodethisshouldComponentUpdatereactjs

有关javascript - React : Best way to update self, 但阻止 child 更新？的更多相关文章

  1. ruby - 在 Ruby 程序执行时阻止 Windows 7 PC 进入休眠状态 - 2

    我需要在客户计算机上运行Ruby应用程序。通常需要几天才能完成(复制大备份文件)。问题是如果启用sleep，它会中断应用程序。否则，计算机将持续运行数周，直到我下次访问为止。有什么方法可以防止执行期间休眠并让Windows在执行后休眠吗？欢迎任何疯狂的想法;-) 最佳答案 Here建议使用SetThreadExecutionStateWinAPI函数，使应用程序能够通知系统它正在使用中，从而防止系统在应用程序运行时进入休眠状态或关闭显示。像这样的东西:require'Win32API'ES_AWAYMODE_REQUIRED=0x0

  2. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  3. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数

  4. objective-c - 在设置 Cocoa Pods 和安装 Ruby 更新时出错 - 2

    我正在尝试为我的iOS应用程序设置cocoapods但是当我执行命令时:sudogemupdate--system我收到错误消息:当前已安装最新版本。中止。当我进入cocoapods的下一步时:sudogeminstallcocoapods我在MacOS10.8.5上遇到错误:ERROR:Errorinstallingcocoapods:cocoapods-trunkrequiresRubyversion>=2.0.0.我在MacOS10.9.4上尝试了同样的操作，但出现错误:ERROR:Couldnotfindavalidgem'cocoapods'(>=0),hereiswhy:U

  5. ruby-on-rails - Rails Associations 的更新方法是什么？ - 2

    这太简单了，太荒谬了，我在任何地方都找不到关于它的任何信息，包括API文档和Rails源代码:我有一个:belongs_to关联，我开始理解当您没有关联时您在Controller中调用的正常模型方法与您有关联时调用的方法略有不同。例如，我的关联在创建Controller操作时运行良好:@user=current_user@building=Building.new(params[:building])respond_todo|format|if@user.buildings.create(params[:building])#etcetera但我找不到关于更新如何工作的文档:@user

  6. 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发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  7. ruby-on-rails - OSX Yosemite 更新破坏了 pow.cx - 2

    升级到OSXYosemite后，我现有的pow.cx安装不起作用。升级到最新的pow.cx无效。通过事件监视器重新启动它也没有成功。 最佳答案 卸载(!)并重新安装解决了这个问题。curlget.pow.cx/uninstall.sh|shcurlget.pow.cx|sh 关于ruby-on-rails-OSXYosemite更新破坏了pow.cx，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/q

  8. ruby - 将 Gitlab 从 9.3.7 更新到 9.3.8 安装 re2 时出错 - 2

    我们在Ubuntu14.04和Gitlab9.3.7上运行，运行良好。我们正在尝试更新到Gitlabv9.3.8的最新安全补丁，但它给我们这个错误:Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension.currentdirectory:/home/git/gitlab/vendor/bundle/ruby/2.3.0/gems/re2-1.0.0/ext/re2/usr/local/bin/ruby-r./siteconf20170720-19622-15i0edf.rbextconf.rbcheckingformain(

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

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

  10. ruby-on-rails - Rails 更新属性 - 2

    我遇到了以下问题。我有一个名为user的模型，它有一个名为activated的列。我试图通过激活的方法更新该值？但它给我错误:验证失败:密码不能为空，密码太短(最少6个字符)这对我来说没有意义，因为我没有接触密码字段!我只想更新激活的列。我把我认为相关的代码放在这里，但如果你认为你需要更多，请问:)非常感谢您!型号:attr_accessor:passwordattr_accessible:name,:email,:password,:password_confirmation,:activatedhas_many:sucu_votesemail_regex=/\A[\w+\-.]+@

随机推荐