既然可在React中直接使用Redux,为什么还需要react-redux库?
为什么在React项目中使用Redux时建议引入react-redux库
Redux本身是独立于任何UI框架的通用状态管理库,你直接在React项目中引入redux包当然可以正常调用Redux的原生API(比如createStore、dispatch、getState等),但手动对接React的话会有很多不必要的重复工作,react-redux作为官方提供的React与Redux的适配层,核心价值可以解决纯Redux在React场景下的诸多痛点:
- 自动处理状态更新与组件重渲染的关联:如果不用react-redux,你需要自己在每个用到Redux状态的组件里手动订阅store变化,还要自己对比状态是否真的变更来决定要不要重渲染组件,处理不好很容易出现不必要的重渲染性能问题,或者状态更新了组件没刷新的bug。react-redux内部已经做了性能优化的订阅逻辑,你只需要声明组件需要哪些状态即可。
- 便捷的store传递机制:如果不用react-redux,你要么把store实例挂载到window全局(存在污染全局、服务端渲染不兼容的问题),要么层层把store当props传递,嵌套层级深的时候非常麻烦。react-redux通过
Provider组件基于React的Context机制传递store,所有子孙组件都可以方便地获取到store实例,不需要手动层层传参。 - 提供更符合React开发习惯的API:不管是类组件用的
connect高阶组件,还是函数组件用的useSelector、useDispatchHook,都是专门为React场景设计的,比直接调用原生Redux API写起来简洁很多,也更符合React的声明式开发范式。 - 适配React的新特性和最佳实践:react-redux会跟着React的版本迭代同步更新,比如支持React 18的并发渲染特性、批处理更新优化等,自己手动对接的话很难及时跟上这些特性的适配。
举个简单的例子:如果不用react-redux,你在函数组件里要拿Redux的状态,得自己写
useEffect订阅store变化,每次更新手动调用getState取值再更新本地state触发重渲染,每个组件都要写一遍这套逻辑;用react-redux的话一行const user = useSelector(state => state.user)就搞定了。
内容的提问来源于stack exchange,提问作者user11004963
相关产品推荐
相关产品推荐

