React框架中如何实现组件的复用和优化？

本文共计1701个文字，预计阅读时间需要7分钟。

目录+前言+封装一个父组件用来包裹其他子组件+子组件如何获取数据+class Component+函数式组件+context.Consumer+useContext+总结+参考+前言+在多种情况下，我们开发项目都需要一个状态管理，方便管理组件间的数据传递。方便起见，+封装一个父组件用来包裹其他子组件+子组件如何获取数据+class Component+函数式组件+context.Consumer+useContext+总结+参考

目录

• 前言
• 封装一个父组件用来包裹其他子组件
• 子组件如何获取数据呢
• class Component 方式
• context.Consumer
• useContext
• 总结
• 参考

前言

在大多数情况下，我们开发项目都需要一个状态管理，方便我们在全局共享状态库，在React生态里比较流行的几个库

redux、mobx、recoil

但是对于小项目，我们完全可以自己封装一个状态管理，减少一个包的安装就可以减小打包以后的项目体积。