4
React-Reduxを理解しようとすると、状態のスライスが変更されたときに、すべてのコンポーネントが新しい小道具を得るのは珍しいことです。これは設計によるものなのですか、何か間違ったことをしていますか？このアプリでは大丈夫変更の影響を受けたコンポーネントのみを更新するReduxを制限する
例のApp
class App extends React.Component {
render(){return (
<div>
<Navbar data={this.props.navbar} />
<Content data={this.props.content} />
</div>);
}
}
select (state) => ({ navbar:state.navbar, content:state.content});
export default connect(select)(App);
コンポーネント
export const NavbarForm = props => {
console.log('RENDERING with props--->',props);
return (<h1>NAV {props.data.val}</h1>);
};
export const ContentForm = props => {
console.log('RENDERING CONTENT with props--->',props);
return (<h1>CONTENT {props.data.val}</h1>);
};
////////INDEX.js//////
const placeholderReducer = (state={val:0},action)=>{
//will update val to current time if action start with test/;
if(action.type.indexOf('TEST/') === 0)return {val:Date.now();}
return state;
}
export const rootReducer = combineReducers({
navbar:placeholderReducer,
content: (state,action)=>(state || {}), //**this will never do a thing.. so content should never updates right !!**
});
const store = createStore(rootReducer, {}, applyMiddleware(thunk));
render(<Provider store={store}> <App /></Provider>, document.getElementById('app')
);
setInterval(()=>{ store.dispatch(()=>{type:'TEST/BOOM'}) },3000);
、私は何を期待することは、コンテンツのコンポーネントが更新されることはありませんしながら、ナビゲーションバーのコンポーネントがすべての3000msに更新されますということですその減速はするので、常に同じ状態を返します。
まだ私は、アクションが実行されるたびに両方のコンポーネントが再レンダリングを行うのは本当に奇妙なことがわかります。
これは仕様です。私のアプリが100以上のコンポーネントを持っている場合、私はパフォーマンスについて心配すべきですか？
あなたのアプリは、パフォーマンスの面で十分に拡張しませんが、私はあなたの主な質問にお答えします。 Navbarの機能コンポーネントをクラスベースのコンポーネントに変換し、ライフサイクルメソッド 'componentWillReceiveProps（nextProps） 'を追加して状態を設定します。詳細については、[here]（https://facebook.github.io/react）を参照してください。 /docs/component-specs.html#updating-componentwillreceiveprops） –
@AdegbuyiAdemolaなぜそれが規模にならないのですか？これはreduxのdocsからのpropsed構造ではありませんか？あなたは精緻化できますか？ライフサイクルの追加はどのように反作用による小道具の更新を防ぎますか？ – Zalaboza
ストアに問題が発生した場合は、最大スタックを超過した可能性があります。私は、ライフサイクルを追加することで反応を減らすことはできないと言っていませんでした....つまり、NavbarでもNavbarをクラスベースのコンポーネントにする必要があります。 –