组件嵌套太深导致渲染卡顿？用组合模式代替层层传递

去年审查一个后台系统看到一个页面组件嵌套了十一层props 从最顶层 drilling 到最底层中间每层都要透传七八个参数。改一个字段名要改六七个文件。更隐蔽的是React 每次渲染都要遍历这整棵树低端设备上明显卡顿。问题根源不是嵌套本身是嵌套方式错了。我们习惯把组件当成容器来用页面组件包着布局组件布局组件包着区块组件区块组件包着卡片组件卡片组件里才是真实内容。每层都接收 props筛选一遍再传给下一层。props 像接力棒一样层层传递中间任何一层掉链子就断了。这种模式的问题在于耦合。父组件知道子组件需要什么数据子组件又依赖父组件的传参结构。一改需求整条链都要动。而且 React 的渲染机制是递归遍历组件树树越深遍历成本越高即使用了 memo浅比较也要跑遍每一层。解决办法是组合模式不是继承不是 HOC是像搭积木一样拼组件。React 官方文档里其实一直推荐这个思路但很多人没当回事。核心思想是父组件只负责搭架子具体内容通过 children 或者 render prop 插进去。中间层不传递数据只提供位置和样式。jsx复制// 以前层层传递Page user{user} orders{orders} settings{settings}Layout user{user}Sidebar user{user} settings{settings} /Main orders{orders} //Layout/Page// 现在组合拼插PageLayoutsidebar{Sidebar /}main{Main /}//PageSidebar 和 Main 各自通过 Context 或者数据获取库拿需要的数据不依赖父组件传参。Page 和 Layout 只关心放在哪不关心放什么。具体怎么落地把页面拆成布局组件和内容组件两类。布局组件负责结构比如两栏、三栏、固定头部。内容组件负责业务比如用户卡片、订单列表。布局组件通过 props 接收内容组件而不是接收数据再往下传。数据获取下沉到叶子节点。能用服务端组件的直接在叶子节点 async/await客户端的用 SWR 或 TanStack Query。父组件不碰数据只负责组合。中间层用 React Context 做依赖注入但只注入能力不注入数据。比如注入一个主题对象或者国际化函数而不是注入用户详情。我的观点组件嵌套深不是问题层层传递才是。组合模式把怎么摆和摆什么解耦树变平了渲染路径变短了改需求时影响的范围也变小了。这不是新思路React 团队从 2018 年就在推但直到被嵌套地狱折磨过才真正理解它的价值。你的项目里组件最多嵌套过几层有没有被 props drilling 逼疯过