ReactJSコンポーネントのインバウンド・ソープをソートする方法は？

Question

私はコレクションである小道具を持つReactJSコンポーネントを持っています。

このコレクションが常にコンポーネントに対してソートされていることを確認します。

ソートロジックはどこに配置しますか？

JSXの内部に配置すると、すべてのレンダリングで実行されますが、これは非効率的です。

class MyComponent { 
    render() { 
     const { collection } = this.props; // I want collection to stay sorted 
     return <div>collection.map(i => <div>i</div>)</div> 
    } 
} 

Answer 1

あなたがコンポーネントに送信する前に、それを並べ替えることはできませんいくつかの理由で、componentWillReceivePropsはこのために良いでしょう場合：

class MyComponent { 
    this.sorted = []; 

    componentWillReceiveProps(nextProps) { 
     // Here you can check if the collection has changed 
     // and skip the sort if it hasn't. 
     this.sorted = sort(nextProps.collection); 
    } 

    render() {...} 
}