リアクションレスキューで生成されたステートレスコンポーネントのパフォーマンス

Question

私はreduxを学び、反応します。そして、私は単純な "ストレステスト"を実行することを決めました。

だから私は、年のような共通の小道具を受け取るステートレスコンポーネントを持っています。そして私は9000回以上このステートレスコンポーネントをクローンして更新したいと思っています。たとえば、2016年から2015年にprop（年）を変更します。

テストプロジェクトでこのコンポーネントをビルドしましたが、動作はしますが、特にIE 11では応答が遅くなりました。私のコードで間違っています。私は私のページコンポーネントに追加した不和のチャットルームで示唆したように

：

 

    shouldComponentUpdate(nProps, nState) { 
     return nProps.year != this.props.year; 
     } 

これはビットを助けました。しかしそれはまだ遅いです。

また、関連する質問として - lodash.assign（）を使用して自分の状態を更新してもよろしいですか？ また、私はtypescriptを使用していて、Object.assign（）の組み込みのpolyfillを持っていないようです。だから私はロダッシュを試してみることに決めました。だからここ

は私の上の基本コンポーネントapp.tsxです：

import * as React from 'react'; 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 
import * as pageActions from '../actions/page'; 

import User from '../components/user/User'; 
import Page from '../components/page/Page'; 

class App extends React.Component<any, any> { 

    render() { 
    const { user, page } = this.props; 
    const { setYear } = this.props.pageActions; 

    return (
     <div> 
     <User name={user.name} /> 
     <Page photos={page.photos} year={page.year} setYear={setYear} /> 
     </div> 
    ); 
    }; 
} 

function mapStateToProps (state) { 
    return { 
    user: state.user, // (1) 
    page: state.page // (2) 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    pageActions: bindActionCreators(pageActions, dispatch) 
    }; 
} 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(App); 

そして、これは私のページの減速である：

import * as React from 'react'; 
import {range} from 'lodash'; 

let StatelessSpan: React.StatelessComponent<any> = (props) => (
    <span>{props.year} </span> 
); 

class Page extends React.Component<any, any> { 

    constructor(props) { 
    super(props); 
    } 

    private onYearBtnClick = (e) => { 
    this.props.setYear(+e.target.innerText); 
    }; 
    shouldComponentUpdate(nProps, nState) { 
    return nProps.year != this.props.year; 
    } 

    render() { 
    const {year, photos} = this.props; 

    let years = range(15000).map((value, index) => { 
     if(index % 4===0){ 
     return <StatelessSpan key={index} year={year} />; 
     } 
     return <span key={index}>i am empty</span> 
    }); 

    return <div> 
     <p> 
     <button onClick={this.onYearBtnClick}>2016</button> 
     <button onClick={this.onYearBtnClick}>2015</button> 
     <button onClick={this.onYearBtnClick}>2014</button> 
     </p> 
     {years} 
    </div>; 
    }; 
} 

export default Page; 

一つは私に言った：

import {assign} from 'lodash'; 


const INITIAL_STATE = { 
    year: 2016, 
    photos: [] 
}; 

function pageReducer(state = INITIAL_STATE, 
         action = {type: '', payload: null}) { 
    switch (action.type) { 
    case 'SET_YEAR': 

    return assign({}, state, {year: action.payload}); 
    default: 
     return state; 
    } 
} 

export default pageReducer; 

とページ・コンポーネントそのinnerTextは実験的で安定していないので、textContentに変更しました。 IEでまだ遅れています。

Answer 1

私はここにこの議論を見つけた：https://twitter.com/mweststrate/status/720177443521343488

だから、これは部分的パフォーマンスについての私の質問に答えると、両方のライブラリは、私の場合にどのように動作するか、この上で良好な視力を提供します。

Answer 2

React/Reduxはアプリを書く最善の方法かもしれませんが、時にはelegancyがパフォーマンスの問題を犠牲にして起こることがあることを理解することは重要です。幸運にも、エレガントなソリューションを取り入れて、他の方法よりもパフォーマンスを上げるほうがずっと簡単です。

ReactとReduxのパフォーマンス最適化のヒントをたくさん投げてしまうかもしれませんが、間違ったものを最適化しているかもしれません。アプリのプロファイルを作成し、実行中のパフォーマンスの問題を見つけ出す必要があります。

この話は非常に役に立ちます。https://www.youtube.com/watch?v=5sETJs2_jwo。 Netflixは非常に遅いReactで始めることができ、物事を乱すことなく物事を超高速に進めることができました。