状态,是指数据的变化,而状态管理,也就是维护状态的数据变化。 可以是视图状态 也可以是逻辑状态
如果xd组件想要共享状态,也可以把状态抽离至公共组件,然而同样通过props形式传递给子组件使用
引入状态管理要解决的一个问题:如何在组件间优雅的共享一些状态。 同步的变化,或者是异步的变化,这是引入状态管理需要解决的另一个问题:如何把各项状态之间的逻辑与其他系统模块之间的互动逻辑进行组织
Context API redux zustand mobx recoil jotai xState
分类单独分析某一个状态管理工具之前,我们先根据其设计理念做一个分类: 1.单项数据流:redux、zustand 2.响应式:mobx 3.状态原子化:recoil、jotai
下面就挑Context、redux、mobx、recoil这几种状态管理方式讲一讲。
Context API并不是一个状态管理工具,它是内置的状态管理功能。使用Context的useContext+useReducer是基本可以实现redux的功能的,所以也是一种可行的状态管理方式。
Context API用useContext生成一个useXXXContent,调用useXXXContent可以从其返回的对象state和一个dispatch,你可以用这个dispatch来修改状态,也可以对dispatch做一个封装,实现一个可以修改的state的函数。
const { state,dispatch } = useContext(StateContext)
dispatch({ type: CHANGE_INPUT, inputValue: e.target.value }) 对于state和props
优点: 。作为React内置的hook,不需要引入第三方库 。书写还算方便
缺点: 。Context只能存储单一值,当数据量大起来时,可能需要使用createContext 。直接使用的话,会有一定的性能问题:每一次对state的某个值变更,都会导致其他使用该state的组件re-render,即使没有使用该值。 你可以通过useMemo来解决这个问题,但是就需要一定的成本来定制一个通用的解决方案。
redux(MVC设计模式)
redux是GitHub star数和周下载量都是最多的管理工具。他的工作流程大致如下:
。用户在view层触发某个事件,通过dispatch发生了action和payload
。action和payload被传入reducer函数,返回一个新的state
。store拿到reducer返回的state并做更新,同时通知view层进行re-render
view—dispatch—>action—reducer—>store
notify
redux设计的思路就是单向数据流。
遵循以下原则:
单一数据源。redux的store只要一个,所有的状态都放在store中,所有的state共同组成了一个树形结构。
state是不可变的。在redux中修改state的方式是dispatch一个action,根据action的payload返回一个新的state。
纯函数修改。redux通过reducer函数来修改状态,他接受前一次的state和action,返回新的state,只要传入相同的state和action,一定会返回相同的结果。
如何获取和设置基本状态值
react-redux提供了两个API:useSelector、useDispatch来获取和设置状态,在函数式组件中获取要比在class组件更方便。
如何处理异步 redux没有规定如何处理异步数据流,最原始的方式就是使用Action Creators,也就是在制造action之前进行各种的异步操作,你可以把要复用的操作抽离出来。 当然这样并不优雅,在实际项目中我们通常使用类似redux-thunk、redux-saga这些中间件来支持处理异步。
如何处理数据间联动 react-redux的useSelector获取状态后,你可以编写一些逻辑来处理派生状态。如果派生状态需要复用,记得给抽离出来。 优点 缺点 。繁荣的社区 。大量的模版,使用redux toolkit可以一定程度上的减少 。可拓展性高 。状态量大起来后,有可能会出现性能问题。redux后面开始支持拆分store,异步去加载store,没到这个业务的场景的时候不加载这个业务的store。但是如果 。单一数据且是树形结构 业务耦合较为严重,那还是跑不掉。 Redux是一个使用叫做“action”的事件来管理和更新应用状态的模式和工具库 集中式store的方式对整个应用中使用的状态进行集中管理,确保状态只能以可预测的方式更新。 Redux Toolkit是官方推荐的编写Redux逻辑的方法。它包含了我们对于构建Redux应用程序必不可少的包和函数。Redux Toolkit的构建简化了大多数Redux任务,防止了常见错误,并使编写[Redux] 应用程序变得更加容易。可以说[Redux Toolkit]就是目前[Redux]的最佳实践方式