useReducer
是一种复杂的管理状态的方式,当状态值是一个对象的时候更多的时候这个方法,reducer可以处理几乎所有的状态更新逻辑,使得整个组件变得更加的清晰以及提升可重用性,以及多个State使用的时候会出现难以管理的情况,而且有时候一个更新状态会取决于其他多个状态,也可以更好的对状态进行封装,在组件中就不需要多次进行状态的修改
使用方法
状态储存在第一个参数,减速器函数储存在减速器函数中
减速器函数会储存我们所有需要的处理状态的逻辑,中心位置允许我们将状态逻辑和组件本身完全的解耦,减速器函数是一个纯函数,永远返回一个更新的状态(这里的更新的状态不是指状态的变异,而是指返回一个新的状态)。
action用于确定用哪种方法来处理状态
eg:const [state,dispatch]=useReducer(reducer,initialState)
使用小技巧
在Reducer使用的时候,reducer函数里面经常会用到switch函数来管理进入的状态,而不是使用if来进行控制
与Usestate
state对于单一简单的事情是好用的,比如简单的数字字符串或者简单的对象,在多个相互关联或者依赖的时候以及处理的时候需要一些复杂的逻辑处理的时候使用Reducer,如果状态需要同时更新也用reducer。
自定义钩子
基本上,钩子都是关于可重用性的,当逻辑需要重用但是里面没用钩子的时候,可以设置成函数,当逻辑需要重用且里面有钩子的时候,就要使用自定义钩子
一个钩子只需要做一件意义特定的事情即可,在创建自定义钩子的时候要使用use开头
在自定义钩子中返回对象或者数组是一件常见的事情。
自定义钩子的本质还是一个函数,可以传入也可以有传出,所以如果把某些状态放入自定义钩子中而且外部还是需要访问这个状态的时候,可以使用return把这个状态传回去
组件
使用类组件的时候,实际上我们是在使用面向对象的编程范式在进行编程,两者最大的区别在于如何管理生命周期以及和处理副作用。两者最大的区别在于钩子
钩子的引入原因
方便状态和副作用管理,通过创建自定义钩子,它们使得共享有状态的逻辑变得更加容易。以及引入钩子以后极大减少了编程中使用this和props的频率,有效的减少了不必要的编程模板,以及自定义钩子的出现帮助了大段的逻辑代码可以被提取到代码之外然后减少程序的体量和提高代码的可重用性。
生命周期方法
挂载
渲染后立即调用,类似于useEffect中的依赖数组为空数组
更新
组件更新以后进行调用,类似于有依赖数组的useEffect。
卸载
只有在组件消失和摧毁以后执行,和useEffect的return有所不同,后者只要副作用完成后就会进行清理
这里会出现一个问题,就是有时候我们的逻辑会分散到两种生命周期方法中,会降低代码的可读性
路由
路由通常通过第三方库来实现,路由是单页应用程序实现的关键,路由的方法避免了之前通过状态管理加条件渲染的方式来达成不同组件的切换,减少了状态管理的麻烦以及让每个页面和组件更加分离
SPA:
指在客户端实现的应用程序,页面有js更新,也就意味着在SPA中永远不会出现整个页面重新加载的情况
路由嵌套
在一个路由中使用双标签而不是单标签然后在其中填充其他的路由,这个时候子路由中的路径不需要写父路由
Outlet
类似于children方法,可以把子路由的部分渲染出来
CSS Moudles
对每个组件有一个独立的Css文件单独引入组件中,一方面可以增强样式的复用性,一方面可以防止所有组件都使用index.css带来的性能损耗