【React系列】聊聊状态管理的那些事儿~

139 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第2天,点击查看活动详情

上一篇文章中,我们知道了 状态 在React里扮演着关键角色,因此如何维护管理它就是一件需要认真思考的事情,本篇文章就准备聊聊React里的状态管理方案,废话不多说,开搞!

ppx.jpg

概述

对于如何管理React里的状态 这个问题,我想每一个人都有自己更倾向的方案,程序的世界里没有银弹,只有更适合场景的方案,而没有最好的方案,因此我们一定要更加客观地看待React里各式各样的状态管理方案

inte.jpg

我个人认为,目前React的状态管理方案大致分为三类:

  • 本地状态
  • context上下文
  • 第三方库

这三种方式各有优劣,下面就分别讲解它们

qidai.jpeg

本地状态

这种方式最简单直接,状态 直接 保存于组件中,每个组件维护各自的状态,不同组件之间通过 prop 进行通信

在简单场景下,这种方式可以很好地胜任,但是如果场景复杂了,涉及到 不同层级 的组件进行通信,单纯地依靠这种方式是行不通的,更多的时候,它是作为一种补充,用于管理少数只有组件自己本身用到的状态

context上下文

这种方式就是为了解决不同层级组件的通信问题,我们可以将多个组件 公用 的状态提取到context中,再通过 provider 将context注入到后代组件中,最终不同的后代组件,无论它们处在哪个层级,它们都可以通过context 间接 进行通信

这种方式里,状态变化是通过更改context来完成,通过context的改变,可以同时影响多个消费了该context的组件,从而可以以一种类似中心管理的方式来控制状态

这种方式有一个明显的缺点,那就是无法通过 shouldComponentUpdate 来做优化,它会直接”穿透“scu,因此会存在一定程度的性能问题

第三方库

这种方式就是利用 开源第三库 来管理状态,目前主流的方案有如下几种

  • redux
  • mobx
  • recoil

这三种方式我会单独进行讲解,所以这里就不展开了

dog.jpeg

结语

react里状态管理方案的选择是十分重要的,因为它直接决定了程序的性能与可维护性,所以一定要认真选择适合我们项目的状态管理方案,即所谓适合的才是最好的,好啦,就到这啦,over!