React Hooks下的全局状态管理

React Hooks

React Hooks 是 React 16.7.0-alpha 版本推出的新特性，旨在解决组件间共享状态逻辑的问题。

**useState: **允许在 function 组件中，声明和改变状态。在此之前，只有 class 组件可以。（useImmer）
**useEffect: **允许在 function 组件中，抽象地使用 React 的生命周期函数。开发者可以使用更函数式的、更清晰的 hooks 的方式。

使用 hooks 对带有本地状态的 Avatar 组件进行重构说明：

import React, { useState, useEffect } from 'react';
const Avatar = () => {
	// 创建 user 状态和修改状态的函数
	const [user, setUser] = useState("马飞");
	// 默认 componentDidMount/componentDidUpdate 时会触发回调
	// 也可以使用第二个参数，指定触发时机
	useEffect(() => {
		document.title = 当前用户：${user};
	});
	// 使用 setUser 改变状态
	return <div onClick={() => setUser("mafeifei")}>{user};
};

useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init);

useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法，提供了组件内使用redux的方式管理状态。
以下是用 reducer 重写 useState 一节的计数器示例：

const initialState = {count: 0};
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}
function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}

hooks官方文档

Redux

作为目前最流行的状态管理框架，Redux在7.1.0版本中也提供了对于Hooks的支持。

API

store和reducer部分和原先保持一致，外层也需要包装Provider

const store = createStore(rootReducer)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

在获取和更新store数据上，Redux针对Hooks提供了新的API。

`useSelector()`

const result : any = useSelector(selector : Function, equalityFn? : Function)
// useSelector(state => state.count)

selector概念上和connect的mapStateToProps参数相似，将store中的state作为第一个参数，在每次component render时都会调用。在数据的更新上，useSelector会订阅store，当有action执行时会重新调用selector获取最新的数据。和mapStateToProps不同的是useSelector默认使用===比较更新前后的数据，所以提供了第二个参数equalityFn来定制比较函数。

`useDispatch`

const dispatch = useDispatch()

useDiapatch返回dispatch的引用，用来调用action。

`useStore()`

const store = useStore()

useStore会返回Redux中store的引用，可以使用store.getState()获取store中的state。

Demo

reducer可配合immer使用
codesandbox

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import { Provider, useSelector, useDispatch } from "react-redux";
import {produce} from 'immer'

const initState = {
  count: 0
};

const reducer = (state = initState, action) => produce(state, draft => {
  switch (action.type) {
    case "increase": {
      draft.count += 1
      break
    }
    case "decrease": {
      draft.count += 1
      break
    }
    default:
  }
})

const store = createStore(reducer);

const Counter = () => {
  const count = useSelector(state => state.count); // useSelector
  const dispatch = useDispatch(); // useDispatch
  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch({ type: "increase" })}>Increase</button>
      <button onClick={() => dispatch({ type: "decrease" })}>Decrease</button>
    </div>
  )
}
const App = () => {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>

  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
    <App />,
  rootElement
);

New Context API + Hooks

useContext

React Hooks提供了useContext来访问context，可以在使用 Consumer 的时候不必包裹 Children

import React, { useContext } from 'react';

function Display() {
  const value = useContext(NumberContext);
  return <div>The answer is {value}.</div>;
}

useReducer

useReducer是hooks提供的针对复杂场景替代useState管理状态的API，提供了action和reducer的方式来管理组件内状态，它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}

文章（link）提供了一种context配合hooks实现全局状态管理的一种思路，相较于纯context，配合hooks的useReducer提供了更为强大的状态管理能力。

import React, {createContext, useContext, useReducer} from 'react';
export const StateContext = createContext();

export const StateProvider = ({reducer, initialState, children}) =>(
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);
export const useStateValue = () => useContext(StateContext);

首先新建一个StateContext，然后再StateContext的Provider中将context的值设置为useReducer(reducer, initialState)，这样当调用action执行reducer后，context的值也将发生变化，似的引用context值得组件更新。由useReducer也保证了只有在数据变化是才会更新组件。
在访问context数据方便也做了一层useStateValue hooks封装，不需要在每个组件里调用useContext。

demo

codesandbox

import React, { createContext, useContext, useReducer } from "react";
import { render } from "react-dom";
import { produce } from "immer";

const StateContext = createContext();

const StateProvider = ({ reducer, initialState, children }) => (
  <StateContext.Provider value={useReducer(reducer, initialState)}>
    {children}
  </StateContext.Provider>
);
const useStateValue = () => useContext(StateContext);

function App() {
  const initialState = {
    count: 0
  };
  const reducer = (state = initialState, action) =>
    produce(state, draft => {
      switch (action.type) {
        case "increase": {
          draft.count += 1;
          break;
        }
        case "decrease": {
          draft.count += 1;
          break;
        }
        default:
      }
    });
  return (
    <StateProvider initialState={initialState} reducer={reducer}>
      <Count />
    </StateProvider>
  );
}

const Count = () => {
  const [{ count }, dispatch] = useStateValue();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch({ type: "increase" })}>Increase</button>
      <button onClick={() => dispatch({ type: "decrease" })}>Decrease</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
render(<App />, rootElement);

unstated-next

unstated是react社区中比较流行的轻量级的状态管理工具，在api设计的时候沿用react的设计思想，能够快速的理解和上手。
Unstated抛出三个对象，分别是Container、Subscribe和Provider。
Unstated会使用React.createContext来创建一个StateContext对象，用来进行状态的传递。

unstated demo

import React from 'react';
import { render } from 'react-dom';
import { Provider, Subscribe, Container } from 'unstated';

type CounterState = {
  count: number
};

class CounterContainer extends Container<CounterState> {
  state = {
    count: 0
  };

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  decrement() {
    this.setState({ count: this.state.count - 1 });
  }
}

function Counter() {
  return (
    <Subscribe to={[CounterContainer]}>
      {counter => (
        <div>
          <button onClick={() => counter.decrement()}>-</button>
          <span>{counter.state.count}</span>
          <button onClick={() => counter.increment()}>+</button>
        </div>
      )}
    </Subscribe>
  );
}

render(
  <Provider>
    <Counter />
  </Provider>,
  document.getElementById('root')
);

随着Hooks的推出，Unstated也推出了符合hooks api的新一代状态管理库unstated-next，在API设计上延续了Unstated贴近react操作的风格，使用自定义hooks来管理状态。

`createContainer(useHook)`

创建container，接受一个封装状态的自定义hook参数

import { createContainer } from "unstated-next"
function useCustomHook() {
  let [value, setValue] = useState()
  let onChange = e => setValue(e.currentTarget.value)
  return { value, onChange }
}
let Container = createContainer(useCustomHook)

`<Container.Provider initialState>`

保留了unstated中的Provider

function ParentComponent() {
  return (
    <Container.Provider initialState={"value"}>
      <ChildComponent />
    </Container.Provider>
  )
}

`useContainer(Container)`

在组件内通过useContainer获取自定义hook中的状态和操作

import { useContainer } from "unstated-next"
function ChildComponent() {
  let input = useContainer(Container)
  return <input value={input.value} onChange={input.onChange} />
}

Demo

codesandbox

import { render } from "react-dom";
import React, { useState } from "react";
import { createContainer } from "unstated-next";

function useCounter(initialState = 0) {
  let [count, setCount] = useState(initialState);
  let increase = () => setCount(count + 1);
  let decrease = () => setCount(count - 1);
  return { count, increase, decrease };
}
let Counter = createContainer(useCounter);

function App() {
  let counter = Counter.useContainer();
  return (
    <div>
      <h1>Counter: {counter.count}</h1>
      <button onClick={counter.increase}>Increase</button>
      <button onClick={counter.decrease}>Decrease</button>
    </div>
  );
}

render(
  <Counter.Provider>
    <App />
  </Counter.Provider>,
  document.getElementById("root")
);

mobx-react-lite

作为流行度仅此于Redux的状态管理组件也针对hooks进行了匹配，推出了新一代的状态管理库mobx-react-lite，不再使用inject将store注入component，而是配合react的新context api将store放入context管理。

demo

codesandbox

import { observable } from 'mobx'
import { Observer, useObserver, observer } from 'mobx-react' // 6.x or mobx-react-lite@1.4.0
import ReactDOM from 'react-dom'

const person = observable({
  name: 'John',
})

// named function is optional (for debugging purposes)
const P1 = observer(function P1({ person }) {
  return <h1>{person.name}</h1>
})

const P2 = ({ person }) => <Observer>{() => <h1>{person.name}</h1>}</Observer>

const P3 = ({ person }) => {
  return useObserver(() => <h1>{person.name}</h1>)
}

ReactDOM.render(
  <div>
    <P1 person={person} />
    <P2 person={person} />
    <P3 person={person} />
  </div>,
)

setTimeout(() => {
  person.name = 'Jane'
}, 1000)

比较

Redux是社区最流行的状态管理工具，生态较好，支持middleware，提供了可预测的状态管理，但需要写大量的模板代码，且包体积在状态管理工具中相对较大，适合大型项目
context + hooks提供了基本的状态管理功能，配合hooks中的useReducer可以支持大部分redux提供的功能，且不需要引入其他库，适合全局状态较简单的项目
unstated将状态和操作封装在container中，优点是在风格上比redux更贴近react的操作方式，也更容易上手，仅有200b，但是相比context+useReducer的方式没什么优势，除非原来就使用了unstated的项目，否则并不推荐。
mobx-react-lite延续了mobx的优点，将状态维护在observable的对象中管理，采用代理的方式，支持直接操作对象，相比redux在代码写法上较为简洁，但对于大型项目，mobx较为灵活的方式不如reducer action->reducer->state的流程更清晰，比较适合中小型项目。