4
私の反応するネイティブアプリでは、パフォーマンスに関するいくつかの問題を発見しました。それは反応還元束に起因するようです。あなたがビデオReactネイティブとReduxでのパフォーマンスが低い
で見ることができるように
派遣アクションとビューのレンダリングとの間に有意な遅延があります。実際のデバイスではさらに悪化します。 この例ではAPI呼び出しはありません。単純なアクションのディスパッチと状態の変更のみ。一方、Facebook Fluxの実装とsetStateの単純な呼び出しは、はるかに高速に動作します。
どのようにアプリのパフォーマンスを改善するためのアイデアですか？私は を使用しています
が反応：v15.2.1、 反応するネイティブ：v0.29.2、 反応-Reduxの：v4.4.5、
ビューを
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {Map} from 'immutable';
import * as testActions from '../reducers/test/testActions';
import {Actions} from 'react-native-router-flux';
const actions = [
testActions
];
function mapStateToProps(state) {
return {
...state
};
}
function mapDispatchToProps(dispatch) {
const creators = Map()
.merge(...actions)
.filter(value => typeof value === 'function')
.toObject();
return {
actions: bindActionCreators(creators, dispatch),
dispatch
};
}
........
<View style={styles.box}>
{PRICE_FILTERS.map(filter =>{
let price_cont_style = {};
let price_text_style = {};
if (filter.id == PRICE_FILTERS[3].id){
price_cont_style.marginRight = 0;
}
if (filter.id == this.props.test.price){
price_cont_style.backgroundColor = 'black';
price_text_style.color = 'white';
}
return(
<TouchableOpacity
key={filter.id}
style={[styles.price_cont, price_cont_style]}
onPress={()=>this.props.actions.setPrice(filter.id)}>
<Text
style={[styles.price_text, price_text_style]}>
{filter.label}
</Text>
</TouchableOpacity>
);
})}
</View>
......
export default connect(mapStateToProps, mapDispatchToProps)(PerformanceTest);
アクション
const {
TEST_SET_PRICE,
} = require('../../lib/constants').default;
export function setPrice(filter) {
return {
type: TEST_SET_PRICE,
payload: filter
};
}
私はあなたのビデオで、あなたはReduxの-ロガーが有効になっているが、フラックスとSETSTATEがコンソールにログインしていないことに気付きました
const {
TEST_SET_PRICE,
} = require('../../lib/constants').default;
const InitialState = require('./testInitialState').default;
export default function authReducer(state = InitialState, action) {
switch (action.type) {
case TEST_SET_PRICE:
if (state.price!=action.payload){
return {price:action.payload}
} else{
return state;
}
}
return state;
}
はい、私はこの問題について知っていましたredux-loggerを使用して、redux-loggerを無効にして、すべてのconsole.logコマンドを削除しようとしました。それは助けになりませんでした。同じ遅延がありました。ビデオでは、唯一のアクションがディスパッチされたという証拠と、ボタンが押されたときに実行される唯一のレンダリングとして、ロガーと「レンダリング」メッセージを残しました。 – alexsh