「前端架构」使用React进行应用程序状态管理

你可以这样做：

function App() {const [someState, setSomeState] = React.useState('some state')return (<>}settings={}/>)}

如果这不是很清楚（因为它是超级做作），迈克尔杰克逊有一个伟大的视频，你可以看，以帮助澄清我的意思。

不过，最终，即使是组合也不能为您做到这一点，所以您的下一步是跳转到React的Context API中。这实际上是一个“解决方案”，但很长一段时间以来，这个解决方案是“非官方的”。正如我所说，很多人求助于react redux，因为它使用我所指的机制解决了这个问题，而不必担心react文档中的警告。但是，既然context是React API的一个官方支持的部分，那么我们可以直接使用它而没有任何问题：

// src/count/count-context.jsimport * as React from 'react'const CountContext = React.createContext()function useCount() {const context = React.useContext(CountContext)if (!context) {throw new Error(`useCount must be used within a CountProvider`)}return context}function CountProvider(props) {const [count, setCount] = React.useState(0)const value = React.useMemo(() => [count, setCount], [count])return }export {CountProvider, useCount}// src/count/page.jsimport * as React from 'react'import {CountProvider, useCount} from './count-context'function Counter() {const [count, setCount] = useCount()const increment = () => setCount(c => c + 1)return {count}}function CountDisplay() {const [count] = useCount()return

注意：这个特定的代码示例非常做作，我不建议您使用上下文来解决这个特定的场景。请阅读支柱钻井，以获得更好的理解为什么支柱钻井不一定是一个问题，往往是可取的。不要太快接触上下文！

这种方法的酷之处在于，我们可以将更新状态的常用方法的所有逻辑放在useCount钩子中：

function useCount() {const context = React.useContext(CountContext)if (!context) {throw new Error(`useCount must be used within a CountProvider`)}const [count, setCount] = contextconst increment = () => setCount(c => c + 1)return {count,setCount,increment,}}

你也可以很容易地用这个来说明：

function countReducer(state, action) {switch (action.type) {case 'INCREMENT': {return {count: state.count + 1}}default: {throw new Error(`Unsupported action type: ${action.type}`)}}}function CountProvider(props) {const [state, dispatch] = React.useReducer(countReducer, {count: 0})const value = React.useMemo(() => [state, dispatch], [state])return }function useCount() {const context = React.useContext(CountContext)if (!context) {throw new Error(`useCount must be used within a CountProvider`)}const [state, dispatch] = contextconst increment = () => dispatch({type: 'INCREMENT'})return {state,dispatch,increment,}}

这为您提供了极大的灵活性，并将复杂性降低了一个数量级。在这样做的时候，要记住以下几点：

并非应用程序中的所有内容都需要处于单个状态对象中。保持逻辑上的分离（用户设置不必与通知处于同一上下文中）。使用此方法将有多个提供程序。不是所有的上下文都需要全局访问！让状态政府尽可能靠近需要的地方。

关于第二点的更多信息。你的应用程序树可能如下所示：

function App() {return ()}function Notifications() {return ()}function UserPage({username}) {return ()}function UserSettings() {// this would be the associated hook for the AuthenticationProviderconst {user} = useAuthenticatedUser()}

请注意，每个页面都可以有自己的提供程序，其中包含其下组件所需的数据。代码拆分对这种东西也“管用”。如何将数据导入每个提供程序取决于这些提供程序使用的钩子以及如何在应用程序中检索数据，但您知道从何处开始查找（在提供程序中）如何工作。

关于为什么这个托管是有益的，请查看我的“State colosition will make your React app faster”和“colocation”博客文章。有关上下文的更多信息，请阅读如何有效地使用React context

服务器缓存与UI状态

最后我想补充一点。状态有多种类型，但每种类型的状态都可以分为两种类型：

服务器缓存—实际存储在服务器上的状态，我们将其存储在客户机中以便快速访问（如用户数据）。UI状态—仅在UI中用于控制应用程序交互部分的状态（如模态isOpen状态）。

当我们把两者结合在一起时，我们犯了一个错误。服务器缓存与UI状态有着本质上不同的问题，因此需要进行不同的管理。如果你接受这样一个事实：你所拥有的根本不是状态，而是一个状态缓存，那么你就可以开始正确地思考它，从而正确地管理它。

当然，您可以使用自己的useState或useReducer在这里和那里使用正确的useContext来管理它。但请允许我帮你直截了当地说，缓存是一个非常困难的问题（有人说它是计算机科学中最难的问题之一），在这个问题上站在巨人的肩膀上是明智的。

这就是为什么我对这种状态使用并推荐react query。我知道我知道，我告诉过你不需要状态管理库，但我并不认为react query是状态管理库。我认为这是个藏匿处。这真是个好主意。看看！坦纳·林斯利是个聪明的小甜饼。

性能怎么样？

当你遵循上面的建议时，性能就很少是个问题了。尤其是当你遵循有关托管的建议时。但是，在某些用例中，性能可能会有问题。当您遇到与状态相关的性能问题时，首先要检查的是有多少组件由于状态更改而被重新呈现，并确定这些组件是否真的需要由于状态更改而重新呈现。如果是这样，那么perf问题不在管理状态的机制中，而是在渲染速度上，在这种情况下，需要加快渲染速度。

但是，如果您注意到有许多组件在没有DOM更新或需要的副作用的情况下进行渲染，那么这些组件将不必要地进行渲染。在React中，这种情况一直都会发生，而且它本身通常不是问题（您应该首先集中精力快速进行不必要的重新渲染），但是如果这真的是瓶颈，那么以下是一些在React上下文中使用state解决性能问题的方法：

将你的状态划分为不同的逻辑部分，而不是在一个大的存储区中，这样对状态的任何部分进行一次更新都不会触发对应用程序中每个组件的更新。优化上下文提供程序把 jotai带进来

这又是一个库的建议。的确，有些用例React的内置状态管理抽象不太适合。在所有可用的抽象中，jotai对于这些用例是最有前途的。如果您想知道这些用例是什么，那么jotai很好地解决的问题类型实际上在 Recoil: State Management for Today's React - Dave McCabe aka @mcc_abe at @ReactEurope 2020一书中得到了很好的描述。Recoil和jotai非常相似（并且解决了相同类型的问题）。但根据我和他们的（有限）经验，我更喜欢jotai。

无论如何，大多数应用程序都不需要像recoil或jotai这样的原子状态管理工具。

结论

同样，这是你可以用类组件来做的事情（你不必使用钩子）。钩子使这变得容易得多，但是您可以用React 15来实现这一理念。尽可能保持状态的本地性，并且只有在支柱钻井成为问题时才使用上下文。这样做会使您更容易维护状态交互。

谢谢大家关注，转发，点赞。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。