react初步學習十四

1. immutable data

immutable data 就是一旦建立，就不能再更改的資料。對 immutable 物件進行修改、新增或刪除操作，都會返回乙個新的 immutable 物件。immutable 實現的原理是持久化的資料結構（persistent data structure），也就是使用舊資料建立新資料時，要保證舊資料同時可用且不變。同時為了避免深拷貝把所有節點都複製一遍帶來的效能損耗，immutable 使用了結構共享（structural sharing），即如果物件樹中乙個節點發生變化，只修改這個節點和受它影響的父節點，其他節點則進行共享。

3 種最重要的資料結構

map ：鍵值對集合，對應於 object ，es6 也有專門的 map 物件。

list ：有序可重複的列表，對應於 array 。

arrayset ：無序且不可重複的列表。

2. immutable 的優點

降低了「可變」帶來的複雜度

節省記憶體

撤銷/重做，複製/貼上，甚至時間旅行這些功能做起來都是小菜一碟

併發安全

擁抱函式式程式設計

3. immutable 的缺點

immutable 中的 map 和 list，取值時要用 map.get(『key』) 而不是 map.key ，要用 array.get(0) 而不是 array[0]

immutable 每次修改都會返回新物件，很容易忘記賦值

容易忘記轉換物件—>解決方案：

4. immutable.is

兩個immutable物件使用 === 來比較——直接比較記憶體位址，其效能最好

let map1 = immutable.
map();
let map2 = immutable.
map();
map1 === map2; // => false

即使兩個物件的值是一樣的，也會返回 false。用immutable.is 來作「值比較」

immutable.is(map1, map2); //
=>
true

5. immutable 與 cursor

import immutable from
'immutable';
import cursor from
'immutable/contrib/cursor';
let data = immutable.fromjs( } });
// 讓 cursor 指向 
let cursor = cursor.from(data, ['a', 'b'], newdata => );
cursor.get('c'); // 1
cursor = cursor.update('c', x => x + 1);
cursor.get('c'); // 2

6. immutable 與 purerender

shouldcomponentupdate

immutable.js

react 做效能優化時最常用的就是 shouldcomponentupdate 方法，但它預設返回 true ，即始終會執行 render 方法，然後做 virtual dom 比較，並得出是否需要做真實 dom的更新，這裡往往會帶來很多沒必要的渲染

immutable.js 則提供了簡潔、高效的判斷資料是否變化的方法，只需 === 和 is 比較就能知道是否需要執行 render ，而這個操作幾乎零成本，所以可以極大提高效能

7. immutable 與 setstate

react 建議把 this.state 當作不可變的，因此修改前需要做乙個深拷貝

import react,  from 'react';
import
'_' from 'lodash';
class
products
extends
component ,}}
handleadd() );
// 如果上面不做 clonedeep，下面列印的結果會是加 1 後的值
console.log(this.state.data.times);
}}export default products;

使用immutable

import react,  from 'react';
class
products
extends
component ),}}
handleadd() ) => ());
// 這時的 times 並不會改變
console.log(this.state.data.get('times'));
}}export default products;

最好不要把 immutable 物件直接暴露在對外的介面

react初步學習十四

React路由初步

react 初步建立頁面

react學習六 react路由

react初步學習十四

React路由 初步

react 初步建立頁面

react學習六 react路由

相關推薦

React路由初步