笔记记录

杂记

React 生命周期与setState的一些坑

1、生命周期

同一个路由中,参数改变加载新页面内容,会触发prop改变,进入componentWillReceiveProps (nextProps)生命周期,如果在这个周期中执行新的数据获取,

使用antd form 表单组件,this.props.form.setFieldsValue会继续触发prop改变,会进入死循环。


2、setState,赋值的时候注意对象赋值会改变源对象的值

通过 Object.assign() 赋值

// 使用 Object.assign() 方法复制对象
let obj1 = { a: 0 , b: { c: 0}};
let obj2 = Object.assign({}, obj1);
console.log(JSON.stringify(obj2)); // { a: 0, b: { c: 0}}

obj2.a = 2;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 0}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 0}}

obj2.b.c = 3;
console.log(JSON.stringify(obj1)); // { a: 1, b: { c: 3}}
console.log(JSON.stringify(obj2)); // { a: 2, b: { c: 3}}

此方法也有不足之处:当修改obj2.b.c的值时,原对象obj1.b.c也跟着发生了变化,Object.assign()只是让对象里第一层的数据没有了关联性,但是对象内的对象则跟被复制的对象有着关联性的。

终极解决方案:JSON.parse(JSON.stringify(obj))

var function cloneObjectFn (obj){ // 对象复制
    return JSON.parse(JSON.stringify(obj))
} 
var obj1={a:2,b{c:0}}var obj2=cloneObjectFn(obj1)console.log(obj2)    // {a:2,b{c:0}}


发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.5.2 Zero

Copyright Your WebSite.Some Rights Reserved.