面试题：在复杂React项目中如何合理选择Props与Context

Question

假设你正在开发一个具有多层嵌套组件结构的大型React应用，其中部分组件需要共享一些全局状态数据，同时也存在组件间常规的数据传递。请详细说明在这种情况下，如何判断哪些数据适合通过Props传递，哪些适合通过Context传递，以及这样选择的理由和可能带来的性能影响。

Answer 1

Props传递

• 适用数据：
  • 数据传递层级较浅，在父子组件或祖孙组件间直接传递的数据。例如一个导航栏组件，父组件传递当前选中菜单项的索引给子导航按钮组件，这种直接相关的业务数据适合用Props。
  • 组件特定的数据，该数据仅与某几个紧密关联的组件交互，不会被应用中其他不相关组件使用。比如一个商品列表组件，父组件传递商品列表数据给子的商品展示组件，这些商品数据仅用于该列表展示相关组件。
• 理由：
  • Props传递数据流向明确，易于理解和维护。从父组件到子组件的单向数据流使得数据传递路径清晰，开发者可以很容易追踪数据的变化和来源。
  • 局部性好，不会影响其他不相关组件。只在特定组件树内传递数据，不会对应用全局产生副作用，增强了组件的独立性和复用性。
• 性能影响：
  • 当组件树较深时，如果使用Props传递数据，可能会导致大量props“逐层传递”，增加不必要的渲染。但在数据传递层级浅且数据量较小时，性能影响不大，并且可以通过React.memo或shouldComponentUpdate等机制进行优化，避免不必要的重新渲染。

Context传递

• 适用数据：
  • 应用的全局状态数据，如当前用户信息、主题设置（暗黑模式/亮色模式）等，这些数据需要被应用中多个不同层级的组件使用。
  • 跨层级且频繁变化的数据，若使用Props传递会导致大量冗余代码和性能问题。例如一个多步骤表单应用，每个步骤组件可能都需要获取全局的表单提交状态，用Context传递更为合适。
• 理由：
  • 减少Props层层传递的繁琐。对于深层嵌套组件需要的数据，无需在中间层组件逐个传递props，简化了数据传递流程。
  • 方便全局数据管理和更新。当全局状态变化时，所有依赖该Context的组件能自动更新，保持数据一致性。
• 性能影响：
  • 由于Context的变化会触发所有使用该Context的组件重新渲染，若Context数据频繁变化，可能会导致性能问题。可以通过使用React.memo包裹消费组件，并利用useContext的第二个参数（依赖数组）进行优化，只有当依赖的Context值发生变化时才重新渲染。同时，避免在Context中传递复杂对象，尽量传递简单状态值或函数，以减少不必要的重新渲染。