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

标签 reactjs redux flux react-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);

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

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

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

最佳答案

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

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

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

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

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

关于reactjs - 限制 Redux 仅更新受更改影响的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38858487/

相关文章:

javascript - 如何在函数参数上使用模板文字?

javascript - react 路由器 6.4.3 typescript - useLocation 任何类型错误

reactjs - 有没有办法在 MobX 中插入可观察值?

javascript - React Router + Redux - 在路由更改时调度异步操作?

javascript - 初始数据加载 ReactJS

javascript - 未正确触发 React 事件

javascript - Redux:依次执行两个 Action

javascript - redux 所需的 proptypes 未定义

javascript - React.js + Flux - 正确初始化存储中的数据对象

reactjs - 将多个 redux 子状态连接到 React 组件