1. 程式人生 > >React之淺拷貝與深拷貝

React之淺拷貝與深拷貝

pan attr OS 角度 new 框架 AR 格式 通過

最近發現的一個bug讓我從react框架角度重新復習了一遍淺拷貝與深拷貝。

淺拷貝,就是兩個變量都是指向一個地址,改變了一個變量,那另一個變量也隨之改變。這就是淺拷貝帶來的副作用,兩個變量會相互影響到,因為它們指向同一個地址。

深拷貝,就是互相獨立,指向的是不同的地址,一個變量改變了,另一個變量不會被影響到。

react角度:

父組件傳給子組件的attr,在子組件通過props.attr直接復制給childAttr,這就是淺拷貝,父組件的attr與子組件的childAttr指向同一個地址,在子組件中改變childAttr,那麽父組件中的attr也會隨之改變。這時再將attr傳入這個子組件,attr的值就是被改變之後的值。所以要想數據源頭attr不會被改變,這時就需要在父組件中深拷貝attr,然後再一一傳入子組件;或者在子組件中將props.attr深拷貝給childAttr。

對於數組的淺拷貝與深拷貝的數據格式:

淺拷貝: newArray = array

深拷貝: newArray = _.map(array, (a) => { return a })

React之淺拷貝與深拷貝