[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10102":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":10,"languages":10,"totalLinesOfCode":10,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":16,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":15,"starSnapshotCount":15,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},10102,"react-bits","vasanthk\u002Freact-bits","vasanthk","✨ React patterns, techniques, tips and tricks ✨","https:\u002F\u002Fvasanthk.gitbooks.io\u002Freact-bits",null,17412,1116,311,11,0,1,4,44.14,"Creative Commons Attribution 4.0 International",false,"master",true,[24,25,26,27,28,29,30],"best-practices","design-patterns","javascript","react","react-patterns","reactjs","techniques","2026-06-12 02:02:17","# [React Bits](https:\u002F\u002Fvasanthk.gitbooks.io\u002Freact-bits)\n\nA compilation of React Patterns, techniques, tips and tricks.\n\n**Gitbook format**: https:\u002F\u002Fvasanthk.gitbooks.io\u002Freact-bits\n\n**Github repo**: https:\u002F\u002Fgithub.com\u002Fvasanthk\u002Freact-bits\n\n> Your contributions are heartily ♡ welcome. (✿◠‿◠)\n\n> **Translations by community:**\n> - 中文版 (Chinese): [react-bits-cn](https:\u002F\u002Fgithub.com\u002Fhateonion\u002Freact-bits-CN)\n> - 한국어 (Korean): [react-bits-ko](https:\u002F\u002Fgithub.com\u002Frayleighko\u002Freact-bits-ko)\n\n\n- Design Patterns and Techniques\n  - [Conditional in JSX](.\u002Fpatterns\u002F1.conditionals-in-jsx.md)\n  - [Async Nature Of setState()](.\u002Fpatterns\u002F2.async-nature-of-setState.md)\n  - [Dependency Injection](.\u002Fpatterns\u002F3.dependency-injection.md)\n  - [Context Wrapper](.\u002Fpatterns\u002F4.context-wrapper.md)\n  - [Event Handlers](.\u002Fpatterns\u002F5.event-handlers.md)\n  - [Flux Pattern](.\u002Fpatterns\u002F6.flux-pattern.md)\n  - [One Way Data Flow](.\u002Fpatterns\u002F7.one-way-data-flow.md)\n  - [Presentational vs Container](.\u002Fpatterns\u002F8.presentational-vs-container.md)\n  - [Third Party Integration](.\u002Fpatterns\u002F9.third-party-integration.md)\n  - [Passing Function To setState()](.\u002Fpatterns\u002F10.passing-function-to-setState.md)\n  - [Decorators](.\u002Fpatterns\u002F11.decorators.md)\n  - [Feature Flags](.\u002Fpatterns\u002F12.feature-flags-using-redux.md)\n  - [Component Switch](.\u002Fpatterns\u002F13.component-switch.md)\n  - [Reaching Into A Component](.\u002Fpatterns\u002F14.reaching-into-a-component.md)\n  - [List Components](.\u002Fpatterns\u002F15.list-components.md)\n  - [Format Text via Component](.\u002Fpatterns\u002F16.format-text-via-component.md)\n  - [React Fragments](.\u002Fpatterns\u002F17.react-fragments.md)\n  - [Share Tracking Logic](.\u002Fpatterns\u002F18.share-tracking-logic.md)\n- Anti-Patterns\n  - [Introduction](.\u002Fanti-patterns\u002FREADME.md)\n  - [Props In Initial State](.\u002Fanti-patterns\u002F01.props-in-initial-state.md)\n  - [findDOMNode()](.\u002Fanti-patterns\u002F02.findDOMNode.md)\n  - [Mixins](.\u002Fanti-patterns\u002F03.mixins.md)\n  - [setState() in componentWillMount()](.\u002Fanti-patterns\u002F04.setState-in-componentWillMount.md)\n  - [Mutating State](.\u002Fanti-patterns\u002F05.mutating-state.md)\n  - [Using Indexes as Key](.\u002Fanti-patterns\u002F06.using-indexes-as-key.md)\n  - [Spreading Props on DOM elements](.\u002Fanti-patterns\u002F07.spreading-props-dom.md)\n- Handling UX Variations\n  - [Introduction](.\u002Fux-variations\u002FREADME.md)\n  - [Composing UX Variations](.\u002Fux-variations\u002F01.composing-variations.md)\n  - [Toggle UI Elements](.\u002Fux-variations\u002F02.toggle-ui-elements.md)\n  - [HOC for Feature Toggles](.\u002Fux-variations\u002F03.HOC-feature-toggles.md)\n  - [HOC props proxy](.\u002Fux-variations\u002F04.HOC-props-proxy.md)\n  - [Wrapper Components](.\u002Fux-variations\u002F05.wrapper-components.md)\n  - [Display Order Variations](.\u002Fux-variations\u002F06.display-order-variations.md)\n- Perf Tips\n  - [Introduction](.\u002Fperf-tips\u002FREADME.md)\n  - [shouldComponentUpdate() check](.\u002Fperf-tips\u002F01.shouldComponentUpdate-check.md)\n  - [Using Pure Components](.\u002Fperf-tips\u002F02.pure-component.md)\n  - [Using reselect](.\u002Fperf-tips\u002F03.reselect.md)\n- Styling\n  - [Introduction](.\u002Fstyling\u002FREADME.md)\n  - [Stateless UI Components](.\u002Fstyling\u002F01.stateless-ui-components.md)\n  - [Styles Module](.\u002Fstyling\u002F02.styles-module.md)\n  - [Style Functions](.\u002Fstyling\u002F03.style-functions.md)\n  - [NPM Modules](.\u002Fstyling\u002F04.using-npm-modules.md)\n  - [Base Component](.\u002Fstyling\u002F05.base-component.md)\n  - [Layout Component](.\u002Fstyling\u002F06.layout-component.md)\n  - [Typography Component](.\u002Fstyling\u002F07.typography-component.md)\n  - [HOC for Styling](.\u002Fstyling\u002F08.HOC-for-styling.md)\n- Gotchas\n  - [Introduction](.\u002Fgotchas\u002FREADME.md)\n  - [Pure render checks](.\u002Fgotchas\u002F01.pure-render-checks.md)\n  - [Synthetic Events](.\u002Fgotchas\u002F02.synthetic-events.md)\n- [Related Links](.\u002FREADINGS.md)\n","React Bits 是一个汇集了 React 设计模式、技巧、提示和最佳实践的项目。它涵盖了从条件渲染、状态管理到性能优化等多个方面的内容，提供了丰富的示例代码和详细说明，帮助开发者理解和应用这些模式和技术。该项目适合正在使用 React 进行开发，并希望提升代码质量和性能的前端工程师参考学习。通过遵循其中的最佳实践，可以有效避免常见的反模式，提高应用程序的可维护性和用户体验。",2,"2026-06-11 03:26:35","top_topic"]