如何优雅的使用react hooks来进行状态管理

在使用react和redux的过程中，一直有一个问题，哪些状态需要放在redux中，状态需要保存在组件内的local state中，此外不合理的使用redux可能会带来状态管理混乱的问题，此外对于local state局部状态而言，react hooks提供了一个比class中的setState更好的一个替代方案。本文主要从状态管理出发，讲讲如何优雅的使用hooks来进行状态管理。

如何使用reduxreact hooks管理local statereact hooks如何解决组件间的通信

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

一、如何使用redux

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

redux做为一款状态管理工具，主要是为了解决组件间通信的问题。

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

(1)全量使用redux

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

redux中的状态从状态更新到反馈到视图，是一个过程链太长，从dispatch一个action出发，然后走reducer等逻辑，一个完整的链路包含：

创建action，创建redux中间件，创建相应type的reducer函数，创建mapState和mapDispatch等。

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

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

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

举例来说，在redux中的状态中有10个学生

//redux    students = [{name:"小白",score:70},{name:"小红",score:50}....] 复制代码

在local state中我们保存了分数在60分以上的学生

// local state    state = [{name:"小白",score:70}] 复制代码

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

class Container extends React.Component{  state = {  group_id:number  }    static getDerivedStateFromProps(props,state){ if(props.group_id!==state.group_id){    ... 更新及格的学生  }else{ return null  }  }  } 复制代码

这里推荐state关联性强，可以先将数据范式化，范式化后的数据类似于给一个复杂结构一个id，这样子会简化getDerivedStateFromProps的逻辑.

(3)本节小结

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

二、react hooks管理local state

前面将了应该如何使用redux,那么如何维护local state呢，React16.8中正式增加了hooks。通过hooks管理local state，简单易用可扩展。

在hooks中的局部状态常见的有3种，分别是useState、useRef和useReducer

(1) useState

useState是hooks中最常见的局部状态，比如：

const [hide, setHide] = React.useState(false); const [name, setName] = React.useState('BI'); 复制代码

理解useState必须明确，在react hooks中：

每一次渲染都有它自己的 Props and State

一个经典的例子就是：

function Counter() { const [count, setCount] = useState(0);   function handleAlertClick() {  setTimeout(() => {  alert('You clicked on: ' + count);  }, 3000);  }   return ( 

如果我按照下面的步骤去操作：

猜猜看会alert出什么？

(2) useRef

在react hooks中,我们知道了每一次的渲染都会有独立的props和state，那么如果我们需要跟类组件一样，每次都能拿到最新的渲染值时，应该怎么做呢？此时我们可以用useRef

useRef提供了一个Mutable可变的数据

我们来修改上述的例子，来是的alert为5:

function Counter() { const [count, setCount] = useState(0) const late = useRef(0) function handleAlertClick() {  setTimeout(() => {  alert('You clicked on: ' + late.current)  }, 3000)  }  useEffect(() => {  late.current = count  }) return ( 

如此修改以后就不是alert3 而是弹出5

(3) useReducer

react hooks中也提供了useReducer来管理局部状态.

当你想更新一个状态，并且这个状态更新依赖于另一个状态的值时，你可能需要用useReducer去替换它们。

同样的用例子来说明：

function Counter() {  const [state, dispatch] = useReducer(reducer, initialState);  const { count, step } = state;    useEffect(() => {  const id = setInterval(() => {  dispatch({ type: 'tick' });  }, 1000);  return () => clearInterval(id);  }, [dispatch]);    return (  <>  

{count}