试图了解React-Redux,我觉得不寻常的是,当状态的任何一部分发生变化时,我的所有组件都会获得新的道具.这是设计还是我做错了？
@H_301_16@示例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);
好吧,在这个应用程序中,我期望Navbar组件将每3000毫秒更新一次,而内容组件永远不会更新,因为它的reducer将始终返回相同的状态.
但是我发现每次触发动作时两个组件都会执行reRender非常奇怪.
这是设计的吗？如果我的应用程序有100个组件,我应该担心性能吗？
