1.useReducer

redux有一个单一的store,

首先使用一个例子感受一下

import React, { useReducer } from 'react';

const reducer = (state, action) => {
  switch(action.type) {
    case 'ADD': return state + 1;
    case 'SUB': return state - 1;
    default: return state;
  }
}

const Child = () => {
  const [count, dispatch] = useReducer(reducer, 10);
  return (
    <div>
      child:{count}
      <button onClick={() => dispatch({type: 'ADD'})}>+1</button>
      <button onClick={() => dispatch({type: 'SUB'})}>-1</button>
    </div>
  )
};

const Parent = () => {
  return (
    <div>
      parent
      <Child />
    </div>
  )
};

function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}

export default App;

useReducer和useState的区别

1.useState的实现是基于useReducer的

2.可以进行全局管理

看下面简单的实现

function useState = (initState) => {
  const [state, dispatch] = useReducer((state, action) => (state || initState), initState);
  return [state, dispatch];
}

2.useContext

先看怎么用吧

import React, { useReducer, useContext } from 'react';

const Ctx = React.createContext(null);
// useContext
const reducer = (state, action) => {
  switch(action.type) {
    case 'ADD': return state + 1;
    case 'SUB': return state - 1;
    default: return state;
  }
}

const Child = () => {
  const [count, dispatch] = useContext(Ctx);
  return (
    <div>
      child:{count}
      <button onClick={() => dispatch({type: 'ADD'})}>+1</button>
      <button onClick={() => dispatch({type: 'SUB'})}>-1</button>
    </div>
  )
};

const Parent = () => {
  const [count] = useContext(Ctx);
  return (
    <div>
      parent: {count}
      <Child />
    </div>
  )
};

function App() {
  const [count, dispatch] = useReducer(reducer, 20);
  return (
    <Ctx.Provider value={[count, dispatch]}>
      <div className="App">
        <Parent />
      </div>
    </Ctx.Provider>
  );
}

export default App;

再来说说其他的： useReducer和useContext的出现并不是要取代redux， redux是一个独立的第三方库，和其他的js可以很好的结合，jq也可以的。而且他也不能替代redux，在功能上

redux有一个优秀的中间件的机制，可以让你实现异步的数据流等等。debugger能力等。所以状态很复杂的话还是使用redux吧。