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

试着理解React-Redux，我发现当状态的任何部分被改变时，我所有的组件都得到了新的props，这是不寻常的。这是故意的还是我做错了什么?

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更新一次，而内容组件将永远不会更新，因为它的reducer将始终返回相同的状态。

然而，我发现它真的很奇怪，这两个组件做渲染每次一个动作被触发。

这是故意的吗?如果我的应用有100多个组件，我应该担心性能吗?

这完全是设计。React假设你的整个应用程序将默认从上到下重新渲染，或者如果某个组件做了setState或类似的事情，至少一个给定的子树将被重新渲染。

因为你只连接了应用中最顶层的组件，所以从那里开始的一切都是React的标准行为。父组件重新渲染，导致它的所有子组件重新渲染，导致所有它们的子组件重新渲染，依此类推。

在React中提高UI性能的核心方法是使用shouldComponentUpdate生命周期方法来检查传入的道具，并在组件不需要重新渲染时返回false。这将导致React跳过重新渲染组件和它的所有后代。shouldComponentUpdate中的比较通常使用浅引用相等来完成，这就是"相同对象引用意味着不更新"的事情变得有用的地方。

当使用Redux和connect时，您几乎总是会发现自己在UI中的许多不同组件上使用connect。这提供了许多好处。组件可以单独提取它们需要的存储状态片段，而不必从根组件传递它们。此外，connect为您实现了默认的shouldComponentUpdate，和对您从mapStateToProps函数返回的值进行类似的检查。所以，从某种意义上说，在多个组件上使用connect往往会给你带来性能方面的"免费胜利"。

关于主题的进一步阅读:

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

是的，这是设计。动作被分派。还原剂。商店订阅者收到"商店已更改"的通知。连接的组件是存储订阅者。

通常情况下，在您可以实际测量性能问题之前不要担心它，您可以将其归因于此-不要过早优化。

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

为你的组件添加一个shouldComponentUpdate方法，这样他们就可以看到他们收到的道具没有不同，不需要渲染(有很多纯渲染混合& &;高阶组件可使这变得容易)
直接连接导航栏和内容组件，而不是连接顶层应用。应用程序永远不会渲染，但如果商店发生变化，孩子们就会渲染。react-redux自动使用shouldComponentUpdate只重新渲染连接的组件，实际上有新的道具。

相关内容

最新更新

热门标签：