レンダリングとライフサイクルメソッドの反応計算の比較

Question

私は反応について何かを理解しようとしており、より良いやり方を考えたいと思っています。

基本的には、入ってくる小道具に対していくつかの変換/計算を行いたいと思っています。私はイベントベースの状態変化を現在制限していますが、将来変化する可能性があります。基本的には、これらの計算をレンダリング、またはcomponentWillMountとcomponentWillReceivePropsで行い、状態を設定する方が良いでしょうか？

例をレンダリング中：

render() { 
    var url = this.getUrl() // get url transforms some props into a valid url 
    var something = this.getSomething() // etc etc 

    return <a href={url}>{something}</a> 
} 

レンダリングの外：

componentWillMount() { 
    this._checkAndSetUrl(this.getUrl(this.props.data)); 
}, 
componentWillReceiveProps(nextProps) { 
    const currentGivenUrl = this._getUrl(this.props.data) 
    const nextGivenUrl = this._getUrl(nextProps.data) 

    if (currentGivenUrl !== nextGivenUrl) { 
    this._checkAndSetUrl(nextGivenUrl); 
    } 
}, 
_checkAndSetUrl(url) { 
    // check validity and do some stuff to url 
    url = "new url" 
    something = this.getSomething() 

    this.setState({url: url, something: something}) 
} 

私の思考は、あなたは物事があるときにのみ、すべてのレンダリングに対して計算を行わないため、2番目の方法の方が良いですかわった。これを行うにはどうしたらいいですか？

Answer 1

ただ、シンプルさと読みやすさのためにあなたがレンダリング中にそれらを維持し、shouldComponentUpdateを実装する必要があります。

shouldComponentUpdate: function(nextProps, nextState) { 
    // TODO: return whether or not current chat thread is 
    // different to former one. this.props refers to the 'old' props. 
} 

あなたはshouldComponentUpdateからfalseを返す場合は、再度呼び出されることはありませんレンダリングします。 this.props.data === nextProps.dataの場合はおそらくfalseを返すことができます。

不要な状態を避けて読めるようにします。小切手を細かくしたい場合は、urlとsomethingを別々のコンポーネントに分割して、それぞれ独自のshouldComponentUpdateとすることができます。詳細については

、https://facebook.github.io/react/docs/advanced-performance.html