Reactの状態でのデータ構造の設定

Question

ReactでES6のSetデータ構造を使用することはできますか？

たとえば、個別の項目で構成されるチェックリストがあり、各項目のチェック状態を維持したいとします。私は設定が本質的に変更可能であるという事実に問題がある可能性があり、理解し、コンポーネントを更新する際に、浅い比較を行い反応するので、それは不変期待し

export default class Checklist extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     checkedItems: new Set() 
    } 
    } 

    addItem(item) { 
    //...? 
    } 

    removeItem(item) { 
    //...? 
    } 

    getItemCheckedStatus(item) { 
    return this.state.checkedItems.has(item); 
    } 

    // More code... 
} 

：私はこのような何かを書きたいのですがその状態で渡され、保持されるべきオブジェクト。しかし、状態でSetオブジェクトを保持して維持する方法はありますか？

Answer 1

反応するので、は（浅いが比較）国有財産を交換した場合にのみ、状態変化を同定し、変異していないだろう変更を適用した後、古いセットから新しいセットを作成する必要があります。

これは新しいSet（oldSet）！== oldSetから可能です。

const oldSet = new Set([1, 2]); 
 
const newSet = new Set(oldSet); 
 

 
console.log(oldSet === newSet);

そして、これはあなたのクラスでそれを使用する方法です：

export default class Checklist extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     checkedItems: new Set() 
    } 

    this.addItem = this.addItem.bind(this); 
    this.removeItem = this.removeItem.bind(this); 
    } 

    addItem(item) { 
    this.setState(({ checkedItems }) => ({ 
     checkedItems: new Set(checkedItems.add(item)); 
    })); 
    } 

    removeItem(item) { 
    this.setState(({ checkedItems }) => { 
     checkedItems.delete(item); 

     return { 
     checkedItems: new Set(checkedItems); 
     }; 
    }); 
    } 

    getItemCheckedStatus(item) { 
    return this.state.checkedItems.has(item); 
    } 

    // More code... 
} 

Answer 2

stateは単なる共通オブジェクトです。あなたが望むものを保持できます。 shouldComponentUpdateライフサイクルメソッドを上書きして、自分で実装することができます。独自のロジックを使用して、コンポーネントの更新が必要かどうかを判断できます。 あなたも、あなたのセットをネストする必要はありません、あなただけのstateとして直接それを設定することができます。

this.state = new Set();