企业官网建设流程全解析

如何用 children prop 优化 bulletproof-react 组件以避免不必要的重渲染？

【免费下载链接】bulletproof-react🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.项目地址: https://gitcode.com/GitHub_Trending/bu/bulletproof-react

在 bulletproof-react 中开发组件时，一个典型问题：父组件因为自己的 state 更新而重新渲染，被它直接渲染的子组件（比如一段纯展示型 UI）也会跟着一起重渲染，即使这些子组件根本不使用那份 state。docs/performance.md 把childrenprop 列为组件层面"最基本、最容易"的优化手段：把这类 JSX 从父组件内部挪到父组件外部、通过childrenprop 传进来，就可以消除这部分不必要的重渲染。本文按该文档给出的 Counter 示例走一遍完整改造路径。

适用对象是仓库apps/下的 React 组件代码（react-vite、nextjs-app、nextjs-pages三套应用使用同一套组件结构），优化的是组件写法本身，不涉及任何依赖安装或配置变更。

原理：children 是一段父组件无法重渲染的独立 VDOM

docs/performance.md 对这一条的原文结论是：

• childrenprop 是优化组件最基本、最容易的方式，应用得当可以消除大量不必要的重渲染；
• 以childrenprop 形式传入的 JSX 代表一个独立的 VDOM 结构，父组件**不需要（也无法）**把它重新渲染。

这与同一文档中"把 state 尽量靠近使用它的地方，以免重渲染不依赖该 state 的组件"的原则是一体的：children是把这个原则落到组件组合上的具体写法——子 UI 被提升到外部持有，父组件内部的 state 更新就影响不到它。

按文档示例完成改造

以下代码均来自 docs/performance.md 的示例（文档示例）。

1. 识别未优化的写法

文档给出的反例：Counter内部直接渲染<PureComponent />，PureComponent不依赖count，但count每次更新它都会被连带重渲染：

// 未优化示例 const App = () => <Counter />; const Counter = () => { const [count, setCount] = useState(0); return ( <div> <button onClick={() => setCount((count) => count + 1)}> count is {count} </button> <PureComponent /> // 每当 "count" 更新时都会重渲染 </div> ); }; const PureComponent = () => <p>Pure Component</p>;

对应到你的代码：当一个组件（如Counter）因自身 state（如count）频繁重渲染，而它内部还有不依赖该 state 的子组件（如PureComponent）时，就是该场景。

2. 把子组件提升到外部，改为通过 children 传入

改造只做两件事：子组件从Counter内部移到它的父级App中；Counter改为接收children并渲染{children}。PureComponent本身保持不变：

// 优化后示例 const App = () => ( <Counter> <PureComponent /> </Counter> ); const Counter = ({ children }) => { const [count, setCount] = useState(0); return ( <div> <button onClick={() => setCount((count) => count + 1)}> count is {count} </button> {children} // 每当 "count" 更新时不会重渲染 </div> ); }; const PureComponent = () => <p>Pure Component</p>;

注意方向不要搞反：是"父组件接收children、子 UI 上提到更外层"，而不是让Counter继续持有PureComponent的 JSX。只有当子 UI 确实不依赖Counter内部 state 时，这个提升才成立。

如何判断优化生效

文档在两组代码的注释中直接给出了预期行为差异，可作为核对标准：

• 未优化版：<PureComponent />在count每次更新时都会重渲染；
• 优化版：{children}在count更新时不会重渲染。

也就是说，改造完成后点击示例中的按钮：count is {count}所在按钮随 state 更新，而通过children传入的PureComponent不再被Counter重渲染。这是文档明确给出的行为结论；文档没有提供额外的检查命令或工具，不要自行补充性能数值上的验证指标。

适用边界与配套技巧

• children只覆盖"父因自身 state 重渲染、子 UI 与该 state 无关"这一类场景。如果子 UI 本身要读取父组件的 state，仍需作为 props 传入，此时该更新无法也不应绕过。
• 当组件 props 过多时，docs/components-and-styling.md 建议将其拆分为多个组件，或使用 children / slots 的组合（composition）技术；该文档指向仓库中的组合示例代码 confirmation-dialog.tsx，可对照查看 bulletproof-react 中一个实际组合型组件的写法。
• children优化与 docs/performance.md 中的 state 拆分建议（不要把一切放进单一 state、让 state 靠近使用处）共同作用：前者解决组件组合层的连带重渲染，后者解决 state 粒度的连带重渲染，两者可以叠加使用。

完成一次 children 改造后，若组件仍因 props 膨胀或 state 粒度过大而连带重渲染，可分别参考上述组合示例与 performance 文档中的 state 优化条目继续处理。

【免费下载链接】bulletproof-react🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.项目地址: https://gitcode.com/GitHub_Trending/bu/bulletproof-react