限制Redux仅更新受更改影响的组件

Question

试图了解React-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);

好吧,在这个应用程序中,我期望Navbar组件将每3000毫秒更新一次,而内容组件永远不会更新,因为它的reducer将始终返回相同的状态.

但是我发现每次触发动作时两个组件都会执行reRender非常奇怪.

这是设计的吗？如果我的应用程序有100多个组件,我应该担心性能吗？

Answer 1

这完全是设计上的.React假设您的整个应用程序默认情况下将从上到下重新呈现,或者如果某个组件执行setState类似或类似操作,则至少会重新呈现给定的子树.

因为您只连接了应用程序中的顶级组件,所以从那里开始的所有内容都是React的标准行为.父组件重新渲染,导致其所有的孩子重新渲染,导致所有的他们的子女重新渲染,如此类推.

在React中提高UI性能的核心方法是使用shouldComponentUpdate生命周期方法检查传入的props,并false在组件不需要重新呈现时返回.这将导致React跳过重新呈现该组件及其所有后代.比较shouldComponentUpdate通常使用浅参考相等来完成,这是"相同的对象引用意味着不更新"的东西变得有用.

使用Redux时connect,您几乎总会发现自己connect在UI中使用了许多不同的组件.这提供了许多好处.组件可以单独提取他们需要的存储状态的各个部分,而不必将它们全部从根组件中移除.此外,为您connect实现默认值shouldComponentUpdate,并对从mapStateToProps函数返回的值执行类似检查.因此,从某种意义上说,connect在多个组件上使用往往会让您在性能方面获得"自由胜利".

进一步阅读该主题:

• Redux FAQ:连接多个组件
• React/Redux链接:性能文章

Answer 2

是的,这是设计的.行动已发送.减速机运行.商店订阅者会收到"商店已更改"的通知.连接的组件是商店订户.

通常,您不必担心它,直到您可以实际测量可归因于此的性能问题 - 不要过早地优化.

如果您发现这是一个问题,那么您可以执行以下操作之一:

• shouldComponentUpdate为您的组件添加一个方法,这样他们就可以看到他们收到的道具没有区别,也不需要渲染(有很多Pure Render mixins和高阶组件可以使这很容易)
• 而不是连接顶级应用程序,直接连接Navbar和Content组件.应用程序将永远不会重新呈现,但如果商店发生变化,孩子们将会这样做.而react-redux会自动使用shouldComponentUpdate仅重新渲染实际拥有新道具的连接组件.