将道具通过多个组件传递给孩子是不好的做法吗？答案

【问题标题】：Is it bad practice to pass props through multiple components down to a child?将道具通过多个组件传递给孩子是不好的做法吗？
【发布时间】：2016-02-25 15:21:05
【问题描述】：

如果我经常将 props 从根组件向下传递给子组件 4-5 个组件，这是不好的做法/会损害性能吗？

我认为链中的每个组件都必须在每次道具更改时重新渲染，这意味着性能不佳，因为它只是大型组件中的一个小子组件，实际上需要更改。

如果确实如此，我应该展平我的根组件，还是应该实现自定义的“shouldComponentUpdate”，或者其他什么？

【问题讨论】：

向下传递 4-5 个组件应该没问题，因为 react 的渲染分辨率非常快。由于每个子组件实际上不需要修改 dom，因此您不会看到性能下降。

标签： reactjs

【解决方案1】：

实现shouldComponentUpdate 是一种很好的做法，可以最大限度地减少重新渲染，尤其是在组件保持简单和小以能够定义shouldComponentUpdate 简单的情况下。

作为替代方案，请查看react-redux 或其他状态容器，以便更轻松地管理状态。

【讨论】：

【解决方案2】：

这种需求应该很少，但 React 的 diff-ing 算法将确保除非必要，否则不会更新任何内容。性能不应该受到影响。

例如，我通常使用执行媒体查询的容器类（使用react-responsive）启动我的应用程序。使用此媒体查询，我将display="desktop" 或display="mobile" 作为下一个组件的支柱传递。我通常将this.props.display 一直传递到我的组件树中，它是我的 CSS 外观的决定因素（桌面视图或移动视图）。在这种情况下，性能实际上得到了增强！

【讨论】：

【解决方案3】：

React 不会重新渲染 DOM，除非树实际上需要更新/更改，因此没有渲染性能成本。

您还可以使用 shouldComponentUpdate() 来管理对每个组件的更新。

Facebook's React Reconciliation

shouldComponentUpdate

【讨论】：