react-hooks知识梳理—6.useReducer, useContext

た入场券 2022-10-31 05:23 173阅读 0赞

### 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;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

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;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20221024/90f7c111dc49441aa04b8a247288555c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20221024/ad71d5c53ea3414789b870a7f9eacea0.png