(好奇)- 拥有顶级智能组件或小型连接组件更好?
(Curious) - Better to have a top-level smart component or small connected components?
我过去构建了一些更大的 Redux 应用程序(这非常有趣)但现在我正在使用它来构建一个简单的小型单一启动页面类型的东西。我选择 Redux 是因为有一些 state/UI 操作可以管理,我认为它很适合。再加上它很棒。
就像现在一样,我将顶级 <App />
组件作为唯一连接到 store/able 的组件来分派操作(通过 mapStateToProps/mapDispatchToProps
方法),并且每个decedents/section 组件本质上是 "dumb components" 只是不断传递部分状态和动作调度函数。
我可以想象自己用另一种方式写这篇文章,其中每个 section/component/major 后代分别连接到商店。我喜欢这个想法,因为传递给许多后代的 props 会更少,但是上面表达的 "trickle down" 方法让我想起了我编写的前几个 React 应用程序的更多数据流。
我很好奇关于解决这个问题的最佳方式的共识是什么,或者是否有一个或者完全取决于我作为开发人员?
在你的应用程序的最顶层只有一个连接组件的问题是你必须明确地将道具传递给 child 组件,有时你最终会传递 属性 和回调通过 child of child of child,等等。你的许多组件将从它们的 parent 接收道具,只是为了将它们传递给它们的 children,而不使用它们。当您看到自己处于这种情况时,这是一个很好的迹象,表明您应该考虑创建一个连接的组件,而不是像 Dan Abramov 所说的那样:
You are coupling parent components too hard to what child components need to render. You're essentially passing many props that are only required by children, and changing them can involve painful refactorings. Instead, as soon as you see that component passes props down without using it, we suggest generating a "container" component using connect().
此外,只有一个 top-level 连接的组件,您的应用程序将始终从顶部到底部 re-render。即使对每个哑组件进行严格的 shouldComponentUpdate
实施,您的性能也会很差。
小型连接组件 因为它减少了不必要的重新渲染,应用程序的每个部分都更新了自己的状态。
好的解决方案:REACT CONF https://www.youtube.com/watch?v=KYzlpRvWZ6c.
我过去构建了一些更大的 Redux 应用程序(这非常有趣)但现在我正在使用它来构建一个简单的小型单一启动页面类型的东西。我选择 Redux 是因为有一些 state/UI 操作可以管理,我认为它很适合。再加上它很棒。
就像现在一样,我将顶级 <App />
组件作为唯一连接到 store/able 的组件来分派操作(通过 mapStateToProps/mapDispatchToProps
方法),并且每个decedents/section 组件本质上是 "dumb components" 只是不断传递部分状态和动作调度函数。
我可以想象自己用另一种方式写这篇文章,其中每个 section/component/major 后代分别连接到商店。我喜欢这个想法,因为传递给许多后代的 props 会更少,但是上面表达的 "trickle down" 方法让我想起了我编写的前几个 React 应用程序的更多数据流。
我很好奇关于解决这个问题的最佳方式的共识是什么,或者是否有一个或者完全取决于我作为开发人员?
在你的应用程序的最顶层只有一个连接组件的问题是你必须明确地将道具传递给 child 组件,有时你最终会传递 属性 和回调通过 child of child of child,等等。你的许多组件将从它们的 parent 接收道具,只是为了将它们传递给它们的 children,而不使用它们。当您看到自己处于这种情况时,这是一个很好的迹象,表明您应该考虑创建一个连接的组件,而不是像 Dan Abramov 所说的那样:
You are coupling parent components too hard to what child components need to render. You're essentially passing many props that are only required by children, and changing them can involve painful refactorings. Instead, as soon as you see that component passes props down without using it, we suggest generating a "container" component using connect().
此外,只有一个 top-level 连接的组件,您的应用程序将始终从顶部到底部 re-render。即使对每个哑组件进行严格的 shouldComponentUpdate
实施,您的性能也会很差。
小型连接组件 因为它减少了不必要的重新渲染,应用程序的每个部分都更新了自己的状态。
好的解决方案:REACT CONF https://www.youtube.com/watch?v=KYzlpRvWZ6c.