cc防御_香港cdn高防ip_云网站服务器ddos防护-51首防安全

当前位置:主页 > 服务器防御 > 本文内容

流量攻击防护_如何解决_cdn流量清洗防ddos攻击

发布时间:2021-02-23 13:06源自:51首防安全作者:51首防安全阅读()

流量攻击防护_如何解决_cdn流量清洗防ddos攻击

React框架的一个中心特性是,当组件的属性发生变化时,它将重新呈现。还可以使用componentwillreceiveprops()对属性的更改执行其他操作或故意不作为,此时您将自己比较新的和旧的props。在这两种情况下,如果所讨论的两个属性都是对象,那么比较就不那么简单了,如何通过javascript对象的一些内部字段来轻松地修改和比较javascript对象呢?注:不可变.js是解决这个问题的好办法。它允许您创建不可变的对象,并提供用于进行简单比较和复制的实用程序——仅举几个特性。但是作为软件工程师,我们经常在限制条件下开发。你不能总是随意利用新的库。考虑到这一点,以下模式可以作为一个不错的解决方案来解决这个问题,而不需要引入任何新的库。关键理解:Javascript对象不是不可变的,在修改和比较对象时必须考虑到这一点。下面是一个例子,说明如何在属性比较中发挥作用。组件A:类ComponentA扩展反应组分{建造师(道具){超级(道具);this.updateStateObject= this.updateStateObject.bind(本);这个州= {反对意见:{field1:'值1',javaddos防御,}};}//更新this.state.objectA.field1到"value2"更新状态对象(){对象新建=this.state.objectA;newObjectA.field1='值2';此设置状态({新目标,});}渲染(){返回();}}组件B:类组件B扩展反应组分{//每次组件B的道具更改时,此方法都会激发组件将接收道具(新道具){//打印出新的和旧的道具控制台.log(`旧道具:${此.props.prop1.field1}`);控制台.log(`新道具:${新属性.prop1.field1}`);}渲染(){返回(

{此.props.prop1.field1}

);}}组件B.propTypes= {道具1:React.PropTypes.obj,支柱2:React.PropTypes.func,};当ComponentA呈现时,它将呈现ComponentB,并传入this.state.objectA作为ComponentB的prop1属性,其updateStateObject()方法作为prop2。尽管ComponentB正在接收属性,但它的componentWillReceiveProps()不会激发,因为在组件的初始呈现中未调用该方法。现在假设我们要打电话组件A.updateStateObject()单击ComponentB中呈现的div(该函数已设置为div的onClick属性)。这将更新对象字段1"值2"。此时,ComponentA将重新渲染,也将使用新的道具重新渲染ComponentB。这将激发ComponentB的componentWillReceiveProps()方法,为新的和旧的props输出prop1.field1,输出如下:旧道具:"value2"新道具:"value2"等等,我以为我们在这里打印新的和旧的道具,那么为什么值是相同的呢?这是因为新的和旧的props变量指向内存中的同一个对象。如果我们查看updateStateObject(),请注意我们没有创建新对象。类ComponentA扩展反应组分{建造师(道具){超级(道具);this.updateStateObject= this.updateStateObject.bind(本);这个州= {反对意见:{field1:'值1',}};}//更新this.state.objectA.field1到"value2"更新状态对象(){//newObjectA只是指向this.state.objectA并不是一个新对象。//ComponentB中使用的变量仍然指向内存中的相同位置。const newObjectA=this.state.objectA;//当我们修改newObjectA时,我们也在修改ComponentB中引用的值newObjectA.field1='值2';此设置状态({新目标,});}渲染(){返回();}}为了避免这种情况,而不是创建一个新的指针this.state.objectA,我们实际上想要创建(和修改)一个全新的对象,它是this.state.objectA.如何轻松创建对象的副本?一种快速而肮脏的方法是将对象字符串化,如何大家ddos防御系统,ddos的防御,然后将该JSON字符串解析回一个全新的对象。我建议您创建一个实用函数,因为您可能希望在整个应用程序中重用它。下面是一个例子:功能深度复制(obj){如果(目标!==未定义(&&O)!==空){返回JSON.parse(JSON.stringify(目标));}返回空值;}下面是在ComponentA中设置值的正确方法:更新状态对象(){const newObjectA=深度复制(this.state.objectA);newObjectA.field1='值2';此设置状态({新目标,低价法国高防cdn,});}使用更新的代码再次运行上一个场景,在第一次重新呈现时,ComponentB的componentWillReceiveProps()的输出将是我们预期的:旧道具:"value1"新道具:"value2"既然我正确地创建了两个不同的对象进行比较,那么如何进行比较呢?最简单的方法是直接比较if语句中的各个字段。组件将接收道具(新道具){如果(此.props.prop1.field1===新属性.prop1.field1){//在这里做事}}但是,如果对象有大量的字段,ddos第三人防御,或者有多个层次的嵌套对象,那么这种模式可能会很麻烦。一种简单的方法是将两个对象串合并,然后直接比较字符串:组件将接收道具(新道具){如果(JSON.stringify(道具1) === JSON.stringify(新属性.prop1)) {//在这里做事}}这种方法通常是安全的,但不能保证工作,因为对象排序并不总是保证的。在您的组件中测试这一点非常重要。现在我可以安全地修改和比较对象了,有没有方法可以控制组件何时渲染?对!最好的方法是使用shouldComponentUpdate()方法。shouldComponentUpdate()直接位于React生命周期中的componentWillReceiveProps()之后,并且仅在初始呈现之后调用。componentWillReceiveProps()允许您在重新渲染之前执行操作,shouldComponentUpdate()充当辅助干预点,以停止或允许组件重新渲染。在shouldComponentUpdate()中也可以使用与componentWillReceiveProps()相同的比较技术。希望您发现这些关于比较对象的React提示很有帮助!查看我们的其他帖子,了解更多关于React的信息。如何在主ReactJS应用程序外部呈现组件React for后端Devs:React与面向对象编程的比较使用PegJS和React引用过滤和自动决策

欢迎分享转载→ 流量攻击防护_如何解决_cdn流量清洗防ddos攻击

用户评论

验证码: 看不清?点击更换

注:网友评论仅供其表达个人看法,并不代表本站立场。

Copyright © 2002-2019 51首防安全 版权所有 备案号:粤ICP备xxxxxxxx号收藏本站 - 网站地图 - - -