如何在 Redux 中嵌套智能组件
介绍
嵌套智能组件是构建 React-Redux 应用程序的流行设计模式。通常，您会发现自己处于必须决定是否将所有组件连接到redux存储或仅连接包装器组件并将 props 传递给子组件的情况。在本指南中，我们将学习如何嵌套容器（即智能组件）以构建高性能应用程序。
问题
在使用React和Redux库时，你可能会遇到这样的情况：你想要连接一个已经连接的组件的子组件，你脑海中首先想到的问题是：“这会导致 UI 重新渲染吗？” 或“这会影响我的应用程序的性能吗？”
想要答案吗？答案是“不”！如果真有的话，这会提高应用程序的性能。
当您的容器（连接组件）的组件树中嵌套了 100 个展示组件时，您必须提取这些组件所需的所有 props 并将它们传递到组件树中。这可能会影响应用程序的性能，因为提供 props 并提取更新后的 prop 可能是一项艰巨的任务。
解决方案
每个组件都可以使用connect()方法连接到 store ，并使用mapStateToProps()保护其 props，而不是从容器向下传递 props 。这样，父容器的负担就减轻了。
connect ()方法经过高度优化，它会检查不同的情况来决定容器是否需要重新渲染。这样，它就避免了不必要的重新渲染，否则会严重影响性能。
让我们从代码开始吧！
用以下代码包裹根组件
为了访问全局存储对象，我们必须使用React-Redux库中的<Provider />组件包装根组件。
index.js
// ...
import { createStore } from "redux";
import { Provider } from "react-redux";
import MainContainer from "./MainContainer";
import reducer from "./reducer";
const store = createStore(reducer);
function App() {
return (
<Provider store={store}>
<MainContainer />
</Provider>
);
}
// ...
完成容器
接下来，我们将创建两个嵌套在主组件中的组件，并将它们全部连接到 redux store。
MainContainer.js
import { connect } from "react-redux";
const MainContainer = props => {
return (
<div>
<p>MainContainer Data {props.data}</p>
<ChildContainer>
</div>
);
};
const mapStateToProps = state => ({
data: state.mainContainerData
});
export default connect(mapStateToProps)(MainContainer);
ChildContainer.js
import { connect } from "react-redux";
const ChildContainer = props => {
return (
<div>
<p>ChildContainer Data {props.data}</p>
<GrandChildContainer>
</div>
);
};
const mapStateToProps = state => ({
data: state.childContainerData
});
export default connect(mapStateToProps)(ChildContainer);
GrandChildContainer.js
import { connect } from "react-redux";
const GrandChildContainer = props => {
return (
<div>
<p>GrandChildContainer Data {props.data}</p>
</div>
);
};
const mapStateToProps = state => ({
data: state.grandChildContainerData
});
export default connect(mapStateToProps)(GrandChildContainer);
这就是我们将每个组件连接到 redux store 的方式。我们没有将任何 props 从一个组件传递到另一个组件。
结论
希望您喜欢这篇有关在React-Redux中嵌套智能组件的指南。快速回顾：嵌套智能组件可以帮助您构建高性能应用程序，因为无需将 props 传递到组件树中。这种设计模式非常适合应用程序中具有大量组件的大型应用程序。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~