一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第2天,点击查看活动详情。
在上一篇文章中,我们知道了 状态 在React里扮演着关键角色,因此如何维护管理它就是一件需要认真思考的事情,本篇文章就准备聊聊React里的状态管理方案,废话不多说,开搞!
概述
对于如何管理React里的状态 这个问题,我想每一个人都有自己更倾向的方案,程序的世界里没有银弹,只有更适合场景的方案,而没有最好的方案,因此我们一定要更加客观地看待React里各式各样的状态管理方案
我个人认为,目前React的状态管理方案大致分为三类:
- 本地状态
- context上下文
- 第三方库
这三种方式各有优劣,下面就分别讲解它们
本地状态
这种方式最简单直接,状态 直接 保存于组件中,每个组件维护各自的状态,不同组件之间通过 prop 进行通信
在简单场景下,这种方式可以很好地胜任,但是如果场景复杂了,涉及到 不同层级 的组件进行通信,单纯地依靠这种方式是行不通的,更多的时候,它是作为一种补充,用于管理少数只有组件自己本身用到的状态
context上下文
这种方式就是为了解决不同层级组件的通信问题,我们可以将多个组件 公用 的状态提取到context中,再通过 provider 将context注入到后代组件中,最终不同的后代组件,无论它们处在哪个层级,它们都可以通过context 间接 进行通信
这种方式里,状态变化是通过更改context来完成,通过context的改变,可以同时影响多个消费了该context的组件,从而可以以一种类似中心管理的方式来控制状态
这种方式有一个明显的缺点,那就是无法通过 shouldComponentUpdate 来做优化,它会直接”穿透“scu,因此会存在一定程度的性能问题
第三方库
这种方式就是利用 开源第三库 来管理状态,目前主流的方案有如下几种
- redux
- mobx
- recoil
这三种方式我会单独进行讲解,所以这里就不展开了
结语
react里状态管理方案的选择是十分重要的,因为它直接决定了程序的性能与可维护性,所以一定要认真选择适合我们项目的状态管理方案,即所谓适合的才是最好的,好啦,就到这啦,over!