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

Question

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

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

但我发现很奇怪的是，每次触发操作时，这两个组件都会重新渲染。

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

Answer 1

这完全是设计使然。 React 假设您的整个应用程序将默认从上到下重新渲染，或者如果某个组件执行 setState ，则至少给定的子树将被重新渲染。或类似的东西。

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

React 中提高 UI 性能的核心方法是使用 shouldComponentUpdate生命周期方法来检查传入的 props 并返回 false如果组件不需要重新渲染。这将导致 React 跳过重新渲染该组件及其所有后代。 shouldComponentUpdate 中的比较通常使用浅引用相等来完成，这就是“相同对象引用意味着不更新”的有用之处。

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

有关该主题的进一步阅读:

• Redux FAQ: Connecting multiple components
• React/Redux Links: Performance articles