本文转载自微信公众号“TianTianUp”，作者小毅。转载本文请联系天天向上公众号。大家好，我是小艺。今天分享的内容是一篇现代Reactstate相关的文章。简介自2013年成立以来，React推出了一套功能强大的工具，可帮助开发人员减轻创建Web应用程序的一些繁琐工作，使他们能够专注于重要的事情。尽管React有许多特性并且在开发人员中持续流行，但我一次又一次地发现我们中的许多人都在问同样的问题。我们如何使用React处理复杂状态？在这篇文章中，我们将了解状态是什么，我们如何组织它，以及我们在应用程序变得越来越复杂时采用的不同模式。理解React中的状态在最纯粹的形式中，React可以被认为是一个蓝图。给定某种状态，您的应用程序将以某种方式运行。React更像是声明式而非命令式，这是一种奇特的表达方式，即您编写想要发生的事情，而不是写下实现它的步骤。因此，正确管理状态非常重要，因为状态控制着应用程序的行为方式。状态实战在我们开始之前，简要讨论一下什么是状态是有帮助的。就我个人而言，我认为状态是随时间变化并直接影响组件行为的可变值的集合。State与props非常相似，但不同之处在于state可以在定义它的上下文中更改，而接收到的props不能在不通过回调函数的情况下更改。让我们看看：constUserList=()=>{const[users,setUsers]=useState([])useEffect(()=>{constgetUsers=async()=>{constresponse=awaitfetch("https://myuserapi.com/users")constusers=awaitresponse.json()setUsers(users)}getUsers()},[])if(users.length<1)returnnull;return
{users.map(user=>- {user.name}
)}
}在这个例子中，我们在安装组件时从API中获取用户，并在收到响应后更新用户数组。我们天真地假设调用总是成功以降低这个例子的复杂性。我们可以看到状态是用来渲染带有用户名的列表项，如果数组中没有用户，它将返回空。状态随时间变化，用于直接影响组件的行为。这里还有一点值得注意的是，我们使用的是React内置的状态管理方法，使用useStateHook。根据您的应用程序和状态管理的复杂性，您可能只需要使用React的内置Hooks来管理您的状态。然而，正如React众多的状态管理解决方案所见，内置的状态管理方法有时是不够的。让我们来看看其中的一些原因。理解props让我们考虑一个稍微复杂一点的应用程序。随着应用程序的增长，您必须创建多层组件来分离关注点和/或提高可读性。当您拥有在树中具有不同位置的多个组件所需的状态时，就会出现问题。如果我们想向UserMenu和Profile组件提供用户数据，我们必须将状态放在App中，因为这是将数据传播到每个需要它的组件的唯一地方。这意味着我们将通过可能不需要这些数据的组件（例如仪表板和设置）用不必要的数据污染它们。现在，如果您需要在另一个组件中操作这些数据怎么办？然后，需要给需要更新的组件提供一个update函数（上例中的setUsers函数），再添加一个需要向下传播的属性——都是为了一个state。现在想象再添加五个属性，它会更加复杂。它很快就会失控。对我来说，这意味着我对通过多层组件的更新程序功能的适应程度。就我个人而言，我有三层的硬性限制；在那之后，我要去寻找另一个解决方案。但在那之前，我会坚持使用React的内置功能。国家图书馆也有成本，没有理由增加不必要的复杂性，除非你确定你绝对需要它。重新渲染的问题由于React在状态更新后自动触发重新渲染，一旦应用增长，内部状态处理就会出现问题。组件树的不同分支可能需要相同的数据，向这些组件提供相同数据的唯一方法是将状态提升到最近的共同祖先。随着应用的增长，大量的state需要向上爬组件树，这会增加props的复杂度，导致state更新时不必要的重新提交。测试问题将所有状态保存在组件中的另一个问题是状态处理变得很麻烦。有状态组件需要您设置复杂的测试场景，您可以在其中调用触发状态并匹配结果的操作。以这种方式测试状态会很快变得复杂，并且更改状态在您的应用程序中的工作方式通常需要完全重写您的组件测试。使用Redux进行状态管理就状态库而言，最著名和广泛使用的状态管理库之一是Redux。Redux于2015年推出，是一个状态容器，可帮助您编写可维护、可测试的状态。它基于Flux的原理，Flux是Facebook的一种开源架构模式。本质上，Redux提供了一个全局状态对象，为每个组件提供它需要的状态，并且只重新渲染接收到该状态的组件（及其子组件）。Redux根据操作和缩减器来管理语句。让我们快速回顾一下这些组件。在此示例中，组件分派一个动作，该动作被发送到reducer。reducer更新状态，进而触发重新渲染。国家是真理的唯一来源；它始终代表您的状态。它的工作是为组件提供状态。示例：{users:[{id:"1231",username:"Dale"},{id:"1235",username:"Sarah"}]}Actions动作是表示状态变化的预定义对象。它们是遵循某种契约的纯文本对象。{type:"ADD_USER",payload:{user:{id:"5123",username:"Kyle"}}}Reducersreducer是一个接收动作并负责更新状态对象的函数。constuserReducer=(state,action)=>{switch(action.type){case"ADD_USER":return{...state,users:[...state.users,action.payload.user]}default:returnstate;}}现代React状态模式虽然Redux仍然是一个很棒的工具，但React随着时间的推移而发展，使我们能够获得新技术。此外，新的想法和概念被引入到状态管理中，导致处理状态的许多不同方式。让我们在本节中研究一些更现代的模式。useReducer和ContextAPIReact16.8引入了Hooks，为我们提供了通过应用程序共享功能的新方法。因此，我们现在可以使用React中内置的Hook，称为useReducer，它允许我们开箱即用地创建Reducer。如果我们将此功能与React的ContextAPI配对，我们现在就有了一个轻量级的类似Redux的解决方案，我们可以在我们的应用程序中使用它。让我们看一个处理API调用的reducer的例子：constapiReducer=(state={},action)=>{switch(action.type){case"START_FETCH_USERS":return{...state,users:{success:false,loading:true,error:false,data:[]}}case"FETCH_USERS_SUCCESS":return{...state,users:{success:true,loading:true,error:false,data:action.payload.data}}case"FETCH_USERS_ERROR":return{...state,users:{success:false,loading:false,error:true,data:[]}}casedefault:returnstate}}现在我们有了Reducer，让我们创建我们的上下文：constapiContext=createContext({})exportdefaultapiContext;有了这两部分，我们现在可以通过组合它们来创建一个高度灵活的状态管理系统：]}}constApiProvider=({children})=>{const[state,dispatch]=useReducer(apiReducer,initialState)返回
{children}}完成后，我们现在需要将此提供程序包装在我们应用程序中需要访问此状态的组件周围。例如，在我们应用程序的根目录：ReactDOM.render(document.getElementById("root"),)现在，任何作为App子组件的组件都可以访问我们的ApiProviders状态和调度程序触发操作和访问状态，如下所示：()=>{constfetchUsers=()=>{apiDispatcher({type:"START_FETCH_USERS"})fetch("https://myapi.com/users").then(res=>res.json()).然后(data=>apiDispatcher({type:"FETCH_USERS_SUCCCESS",users:data.users})).catch((err)=>apiDispatcher({type:"START_FETCH_ERROR"}))}fetchUsers()},[])使用用于管理状态的状态机和XState另一种流行的状态管理方式是使用状态机。简而言之，状态机是专门的状态容器，可以在任何时候保存有限数量的状态。这使得状态机极具可预测性。由于每个状态机都遵循相同的模式，您可以在生成器中插入一个状态机，并收到一个包含数据流概览的状态图。状态机在格式方面通常遵循比Redux更严格的规则以保持可预测性。在React状态管理领域，XState是最流行的用于创建、解释和操作状态机的库。让我们看一下XState文档中的示例：import{createMachine,interpret,assign}from'xstate';constfetchMachine=createMachine({id:'DogAPI',initial:'idle',context:{dog:null},states:{idle:{on:{FETCH:'loading'}},loading:{invoke:{id:'fetchDog',src:(context,event)=>fetch('https://dog.ceo/api/breeds/image/random').then((data)=>data.json()),onDone:{target:'resolved',actions:assign({dog:(_,event)=>event.data})},onError:'rejected'},on:{CANCEL:'idle'}},resolved:{type:'final'},rejected:{on:{FETCH:'loading'}}}});constdogService=interpret(fetchMachine).onTransition((state)=>console.log(state.value)).start();dogService.send('FETCH');useSWR这些年来状态管理变得越来越复杂。虽然适当的状态管理与像React这样的视图库相结合可以让我们做一些了不起的事情，但毫无疑问，我们正在将大量的复杂性转移到前端。随着复杂性的增加，我们也会招致更多的认知负担、更多的间接性、更多的潜在错误以及更多需要彻底测试的代码。在这方面，useSWR令人耳目一新。将这个库与ReactHooks的原生功能相结合，会产生一种让人难以不喜欢的简单性。这个库使用HTTP缓存技术stale-while-revalidate，这意味着它保留以前数据集的本地缓存，并在后台与API同步以获取新数据。这使应用程序保持高性能和用户友好，因为UI可以在等待更新时响应过时的日期。让我们看看我们如何利用这个库并摆脱一些复杂的状态管理：//DatafetchinghookimportuseSWRfrom'swr'constuseUser(userId){constfetcher=(...args)=>fetch(...args).then(res=>res.json())const{data,error}=useSWR(`/api/user/${userId}`,fetcher)return{user:data,error,loading:!data&&!error}}exportdefaultuseUser现在我们有了一个可重用的Hook，我们可以利用它来将数据输入到我们的组件视图中。无需创建reducer、action或将组件连接到state以获取数据-只需在需要数据的组件中导入和使用Hook：importLoaderfrom'../components/Loader'importUserErrorfrom'../components/UserError'importuseUserfrom'。./hooks/useUser';constUserProfile=({id})=>{const{user,error,loading}=useUser(id);if(loading)returnif(error)returnreturn{user.name}
...}另一个组件：importLoaderfrom'../components/Loader'importUserErrorfrom'../components/UserError'importuseUserfrom'。./hooks/useUser';constHeader=({id})=>{const{user,error,loading}=useUser(id);if(loading)returnif(error)returnreturn}这个方法可以让你很方便的传递可以访问共享数据对象的Hooks，因为useSWR的第一个参数是一个键（Key）。const{data,error}=useSWR(`/api/user/${userId}`,fetcher)基于这个Key，我们的请求被压缩、缓存，并使用useUserHook在我们所有的组件之间共享。这也意味着只要密钥匹配，就只会向API发送一个请求。即使我们有10个组件使用useUserHook，只要useSWR键匹配，也只会发送一个请求。结论如果React是一个始终代表应用程序状态的画布，那么状态是否正确真的很重要。在这篇文章中，我们研究了React应用程序中处理状态的各种方式，事实上，我们可以包括更多。Recoil和Jotai，更不用说ReactQuery和MobX，在这样的讨论中肯定是相关的，我们有很多不同的状态库是一件好事。它促使我们尝试不同的事物，并促使图书馆作者不断做得更好。那就是前进的方向。
