示例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个组件,我应该担心性能吗?
因为您只连接了应用程序中的顶级组件,所以从那里开始的所有内容都是React的标准行为.父组件重新呈现,导致其所有子项重新呈现,依此类推.
在React中提高UI性能的核心方法是使用shouldComponentUpdate生命周期方法来检查传入的props,如果组件不需要重新渲染,则返回false.这将导致React跳过重新呈现该组件及其所有后代. shouldComponentUpdate中的比较通常使用浅引用相等来完成,这是“相同的对象引用意味着不更新”的东西变得有用.
使用Redux和连接时,您几乎总会发现自己在UI中的许多不同组件上使用connect.这提供了许多好处.组件可以单独提取他们需要的存储状态的各个部分,而不必将它们全部从根组件中移除.此外,connect为您实现了一个默认的shouldComponentUpdate,并对您从mapStateToProps函数返回的值进行了类似的检查.因此,从某种意义上说,在多个组件上使用连接往往会让您在性能方面获得“自由获胜”.
进一步阅读该主题:
> Redux FAQ: Connecting multiple components
> React/Redux Links: Performance articles
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。