如何优雅的使用反应钩子来进行状态管理

如何使用回来的

反应钩子管理当地国家

反应钩子如何解决组件间的通信

原文在我的博客中:github.com/fortheallli…欢迎订阅

一、如何使用回来的

首先要明确为什么要使用回来的,这一点很重要,如果不知道为什么使用回来的,那么在开发的过程中肯定不能合理的使用回来的。首先来看回来的的本质:

既然是组件间的通信问题,那么显然将所有页面的状态都放入的再现中,是不合理的,复杂度也很高。

(1)全量使用回来的

笔者在早期也犯了这个问题,在应用中,不管什么状态,按页面级路由拆分,全部放在回家的中,页面任何状态的更改,通过react-redux的mapState和mapDispatch来实现。

回来的中的状态从状态更新到反馈到视图,是一个过程链太长,从派遣一个行动出发,然后走减速器等逻辑,一个完整的链路包含:

如果将所有状态都保存在的再现中,那么每一个状态必须走这几步流程,及其繁琐,毫无疑问增加了代码量

(2)减少局部状态和回来的状态的不合理混用

全量使用回来的的复杂度很高,我们当然考虑将一部分状态放在回家的中,一部分状态放在本地状态中,但是这种情况下,很容易产生一个问题,就是如果本地状态跟回来的中存的状态在状态依赖。

举例来说,在回来的中的状态中有10个学生

//回家的
　　
　　学生=({name: "小白”,分数:70},{名字:“小红”,得分:50}....]
　　复制代码

在本地状态中我们保存了分数在60分以上的学生

//本地状态
　　
　　状态=[{名字:“小白”,分数:70}]
　　复制代码

如果回来的中的学生改变了,我们需要从回来的中动态的获取学生信息,然后改变局部的状态。结合react-redux,我们需要在容器组件中使用componentWillReceivedProps或者getDerivedStateFromProps这个声明周期,来根据道具改变局部的地方。

componentWillReceivedProps这里不讨论,为了更高的安全性,在反应中用静态的getDerivedStateFromProps代替了componentWillReceivedProps这里不讨论,而getDerivedStateFromProps这个声明周期函数在道具和状态变化的时候都会去执行,因此如果我们需要仅仅在道具的改变而改变局部的地方,在这个声明周期中会存在着很复杂的判断逻辑。

给我们的启示就是尽可能的减少getDerivedStateFromProps的使用,如果实在是回家的和当地国家有关联性,用id会比直接用对象或者数组好,比如上述的例子,我们可以将学生分组,并给一个组号,每次在回来的中的学生信息发生改变的时候会改变相应的组号。这样在getDerivedStateFromProps只需要判断组号是否改变即可:

类容器扩展React.Component {
　　状态={
　　group_id:数量
　　}
　　
　　静态getDerivedStateFromProps(道具、状态){如果(props.group_id !==state.group_id) {
　　
　　…更新及格的学生
　　}{返回null
　　}
　　}
　　}
　　复制代码

这里推荐https://github.com/paularmstrong/normalizr,如果实在回家的和本地状态关联性强,可以先将数据范式化,范式化后的数据类似于给一个复杂结构一个id,这样子会简化getDerivedStateFromProps的逻辑。

(3)本节小结

如何使用回来的,必须从回来的的本质出发,回来的的本质是为了解决组件间的通信问题,因此组件内部独有的状态不应该放在回家的中,此外如果回来的结合类类组件使用,可以将数据范式化,简化复杂的判断逻辑。

二,钩子反应管理当地国家

前面将了应该如何使用回来的,那么如何维护本地状态呢,React16.8中正式增加了钩子。通过钩子管理当地国家,简单易用可扩展。

在钩子中的局部状态常见的有3种,分别是useState, useRef和useReducer

(1) useState

useState是钩子中最常见的局部状态,比如:

 const[隐藏,setHide]=React.useState(假);const[名字,setName]=React.useState (BI);
　　复制代码
如何优雅的使用反应钩子来进行状态管理